tessl/npm-react-aria--i18n

Comprehensive internationalization support for React applications with locale-aware hooks and utilities

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

React Aria I18n

Name: tessl/npm-react-aria--i18n
Author: tessl

React Aria I18n provides comprehensive internationalization support for React applications through hooks and components that handle locale-specific formatting, text processing, and accessibility features. It leverages browser Intl APIs for performance without large locale data downloads, supports over 30 languages with built-in RTL support, and integrates seamlessly with React Aria's accessibility ecosystem.

Package Information

Package Name: @react-aria/i18n
Package Type: npm
Language: TypeScript
Installation: npm install @react-aria/i18n

Core Imports

import { 
  I18nProvider, 
  useLocale, 
  useDateFormatter, 
  useNumberFormatter,
  useLocalizedStringFormatter
} from "@react-aria/i18n";

For CommonJS:

const { 
  I18nProvider, 
  useLocale, 
  useDateFormatter, 
  useNumberFormatter 
} = require("@react-aria/i18n");

Server-side imports:

import { PackageLocalizationProvider } from "@react-aria/i18n/server";

Basic Usage

import { I18nProvider, useLocale, useDateFormatter } from "@react-aria/i18n";

function App() {
  return (
    <I18nProvider locale="es-ES">
      <DateDisplay />
    </I18nProvider>
  );
}

function DateDisplay() {
  const { locale, direction } = useLocale();
  const formatter = useDateFormatter({ 
    dateStyle: "full", 
    timeStyle: "short" 
  });
  
  return (
    <div dir={direction}>
      <p>Locale: {locale}</p>
      <p>Date: {formatter.format(new Date())}</p>
    </div>
  );
}

Architecture

React Aria I18n is built around several key components:

Context System: I18nProvider manages locale state with automatic RTL detection
Formatting Hooks: Locale-aware hooks for dates, numbers, lists, and strings
Utility Functions: RTL detection and locale processing utilities
Server Support: SSR-compatible components for localization injection
Performance: Automatic caching and browser Intl API integration

Capabilities

Core Context and Locale Management

Context provider and locale detection for establishing internationalization context throughout the application.

interface I18nProviderProps {
  children: ReactNode;
  locale?: string;
}

function I18nProvider(props: I18nProviderProps): JSX.Element;

interface Locale {
  locale: string;
  direction: Direction;
}

function useLocale(): Locale;

Context and Locale

Date and Time Formatting

Locale-aware date and time formatting with calendar support and automatic locale updates.

interface DateFormatterOptions extends Intl.DateTimeFormatOptions {
  calendar?: string;
}

function useDateFormatter(options?: DateFormatterOptions): DateFormatter;

Date and Time Formatting

Number and List Formatting

Numeric formatting and list presentation for different locales and cultural contexts.

function useNumberFormatter(options?: NumberFormatOptions): Intl.NumberFormat;

function useListFormatter(options?: Intl.ListFormatOptions): Intl.ListFormat;

Number and List Formatting

String Localization and Search

Advanced string handling including localization, collation, and locale-aware text filtering.

function useLocalizedStringFormatter<K extends string = string, T extends LocalizedString = string>(
  strings: LocalizedStrings<K, T>,
  packageName?: string
): LocalizedStringFormatter<K, T>;

interface Filter {
  startsWith(string: string, substring: string): boolean;
  endsWith(string: string, substring: string): boolean;
  contains(string: string, substring: string): boolean;
}

function useFilter(options?: Intl.CollatorOptions): Filter;

function useCollator(options?: Intl.CollatorOptions): Intl.Collator;

String Localization and Search

Server-Side Rendering Support

Components and utilities for server-side localization with client hydration support.

interface PackageLocalizationProviderProps {
  locale: string;
  strings: PackageLocalizedStrings;
  nonce?: string;
}

function PackageLocalizationProvider(props: PackageLocalizationProviderProps): JSX.Element | null;

function getPackageLocalizationScript(locale: string, strings: PackageLocalizedStrings): string;

Server-Side Rendering Support

Utility Types

type Direction = "ltr" | "rtl";

type FormatMessage = (key: string, variables?: {[key: string]: any}) => string;

type PackageLocalizedStrings = {
  [packageName: string]: Record<string, LocalizedString>;
};

// Re-exported from @internationalized packages
type LocalizedStrings<K extends string = string, T extends LocalizedString = string> = Record<string, Record<K, T>>;
type LocalizedString = string | LocalizedStringParams;
type NumberFormatOptions = Intl.NumberFormatOptions;

Utility Functions

/**
 * Determines if a locale is read right to left using Intl.Locale
 * @param localeString - BCP47 language code
 * @returns true if locale is RTL, false otherwise
 */
function isRTL(localeString: string): boolean;

/**
 * Gets the default browser/system locale
 * @returns Locale object with detected locale and direction
 */
function getDefaultLocale(): Locale;

/**
 * Hook that returns the current browser/system language and updates when it changes
 * @returns Locale object that updates on language change events
 */
function useDefaultLocale(): Locale;

Install with Tessl CLI