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

Securityby

Pending

The risk profile of this skill

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;

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 2 months ago
Describes: pkg:npm/@react-aria/i18n@3.12.x
Publish Source: CLI
Badge