CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-aria

Comprehensive library of unstyled React hooks providing accessible UI primitives with full WAI-ARIA compliance and internationalization support.

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

internationalization.mddocs/

Internationalization

Comprehensive internationalization support with locale-aware formatting, RTL layout, and localization utilities. React Aria provides built-in support for over 30 languages with proper cultural adaptations.

Capabilities

I18n Provider

Provides internationalization context for the entire application.

/**
 * I18n provider component that sets up locale context
 * @param props - I18n provider configuration
 * @returns Provider component
 */
function I18nProvider(props: I18nProviderProps): JSX.Element;

interface I18nProviderProps {
  /** Children to provide context to */
  children: ReactNode;
  /** Current locale */
  locale?: string;
  /** Map of localized strings */
  strings?: LocalizedStrings;
}

interface LocalizedStrings {
  [locale: string]: {
    [key: string]: string;
  };
}

Locale Management

Provides current locale information and utilities.

/**
 * Get current locale information
 * @returns Locale information
 */
function useLocale(): {
  /** Current locale string (e.g., 'en-US') */
  locale: string;
  /** Text direction for the locale */
  direction: 'ltr' | 'rtl';
};

/**
 * Check if current locale is right-to-left
 * @param locale - Locale to check (defaults to current)
 * @returns Whether locale is RTL
 */
function isRTL(locale?: string): boolean;

/**
 * Get the text direction for a locale
 * @param locale - Locale to check
 * @returns Text direction
 */
function getTextDirection(locale: string): 'ltr' | 'rtl';

/**
 * Get the reading direction for a locale
 * @param locale - Locale to check
 * @returns Reading direction
 */
function getReadingDirection(locale: string): 'ltr' | 'rtl';

Date Formatting

Provides locale-aware date and time formatting.

/**
 * Provides locale-aware date formatting
 * @param options - Date formatting options
 * @returns Date formatter instance
 */
function useDateFormatter(options?: DateFormatterOptions): DateFormatter;

interface DateFormatterOptions extends Intl.DateTimeFormatOptions {
  /** Calendar system to use */
  calendar?: string;
}

interface DateFormatter {
  /** Format a date */
  format(date: Date): string;
  /** Format a date to parts */
  formatToParts(date: Date): Intl.DateTimeFormatPart[];
  /** Format a date range */
  formatRange(startDate: Date, endDate: Date): string;
  /** Format a date range to parts */
  formatRangeToParts(startDate: Date, endDate: Date): Intl.DateTimeFormatPart[];
  /** Get supported locales */
  resolvedOptions(): Intl.ResolvedDateTimeFormatOptions;
}

Usage Examples:

import { useDateFormatter } from "react-aria";

function DateDisplay({ date }) {
  const formatter = useDateFormatter({ 
    year: 'numeric',
    month: 'long', 
    day: 'numeric'
  });
  
  return <span>{formatter.format(date)}</span>;
}

// Relative time formatting
function RelativeTime({ date }) {
  const formatter = useDateFormatter({ 
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric'
  });
  
  return <time dateTime={date.toISOString()}>{formatter.format(date)}</time>;
}

// Date range formatting
function DateRange({ startDate, endDate }) {
  const formatter = useDateFormatter({
    month: 'short',
    day: 'numeric'
  });
  
  return <span>{formatter.formatRange(startDate, endDate)}</span>;
}

Number Formatting

Provides locale-aware number, currency, and unit formatting.

/**
 * Provides locale-aware number formatting
 * @param options - Number formatting options
 * @returns Number formatter instance
 */
function useNumberFormatter(options?: Intl.NumberFormatOptions): Intl.NumberFormat;

Usage Examples:

import { useNumberFormatter } from "react-aria";

// Currency formatting
function Price({ amount, currency = 'USD' }) {
  const formatter = useNumberFormatter({
    style: 'currency',
    currency
  });
  
  return <span>{formatter.format(amount)}</span>;
}

// Percentage formatting
function Percentage({ value }) {
  const formatter = useNumberFormatter({
    style: 'percent',
    minimumFractionDigits: 1
  });
  
  return <span>{formatter.format(value)}</span>;
}

// Unit formatting
function Distance({ value, unit = 'kilometer' }) {
  const formatter = useNumberFormatter({
    style: 'unit',
    unit,
    unitDisplay: 'long'
  });
  
  return <span>{formatter.format(value)}</span>;
}

// Compact notation
function LargeNumber({ value }) {
  const formatter = useNumberFormatter({
    notation: 'compact',
    compactDisplay: 'short'
  });
  
  return <span>{formatter.format(value)}</span>;
}

Text Collation

Provides locale-aware string comparison and sorting.

/**
 * Provides locale-aware string collation
 * @param options - Collation options
 * @returns Collator instance
 */
function useCollator(options?: Intl.CollatorOptions): Intl.Collator;

Usage Examples:

import { useCollator } from "react-aria";

// Sorting with proper locale collation
function SortedList({ items }) {
  const collator = useCollator({ 
    numeric: true,
    sensitivity: 'base'
  });
  
  const sortedItems = [...items].sort((a, b) => 
    collator.compare(a.name, b.name)
  );
  
  return (
    <ul>
      {sortedItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// Case-insensitive search
function SearchResults({ items, query }) {
  const collator = useCollator({
    sensitivity: 'base',
    ignorePunctuation: true
  });
  
  const filteredItems = items.filter(item =>
    collator.compare(item.name.toLowerCase(), query.toLowerCase()) === 0
  );
  
  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Text Filtering

Provides locale-aware text filtering and searching.

/**
 * Provides locale-aware text filtering
 * @param options - Filter options
 * @returns Filter function
 */
function useFilter(options?: FilterOptions): Filter;

interface FilterOptions {
  /** Sensitivity level for matching */
  sensitivity?: 'base' | 'accent' | 'case' | 'variant';
  /** Whether to ignore punctuation */
  ignorePunctuation?: boolean;
  /** Numeric sorting */
  numeric?: boolean;
  /** Usage hint for optimization */
  usage?: 'sort' | 'search';
}

interface Filter {
  /** Check if text starts with query */
  startsWith(text: string, query: string): boolean;
  /** Check if text ends with query */
  endsWith(text: string, query: string): boolean;
  /** Check if text contains query */
  contains(text: string, query: string): boolean;
}

String Localization

Provides localized string formatting with interpolation.

/**
 * Provides localized string formatting
 * @param strings - Localized strings map
 * @returns String formatter function
 */
function useLocalizedStringFormatter(strings: LocalizedStrings): LocalizedStringFormatter;

/**
 * Provides message formatting with ICU syntax
 * @param locale - Target locale
 * @returns Message formatter function
 */
function useMessageFormatter(locale: string): FormatMessage;

interface LocalizedStringFormatter {
  /** Format a localized string with interpolation */
  format(key: string, values?: Record<string, any>): string;
}

type FormatMessage = (
  descriptor: { id: string; defaultMessage?: string; description?: string },
  values?: Record<string, any>
) => string;

Usage Examples:

import { useLocalizedStringFormatter, useMessageFormatter } from "react-aria";

// Basic string localization
const strings = {
  'en-US': {
    'welcome': 'Welcome, {name}!',
    'items_count': 'You have {count} items'
  },
  'es-ES': {
    'welcome': '¡Bienvenido, {name}!',
    'items_count': 'Tienes {count} elementos'
  }
};

function Welcome({ userName, itemCount }) {
  const { format } = useLocalizedStringFormatter(strings);
  
  return (
    <div>
      <h1>{format('welcome', { name: userName })}</h1>
      <p>{format('items_count', { count: itemCount })}</p>
    </div>
  );
}

// ICU message formatting
function PluralMessage({ count }) {
  const formatMessage = useMessageFormatter('en-US');
  
  const message = formatMessage({
    id: 'item_count',
    defaultMessage: '{count, plural, =0 {No items} =1 {One item} other {# items}}'
  }, { count });
  
  return <span>{message}</span>;
}

RTL Layout Support

Utilities for handling right-to-left layout and styling.

/**
 * Get appropriate style properties for RTL layouts
 * @param props - Style properties to transform
 * @param locale - Target locale
 * @returns Transformed style properties
 */
function getRTLStyles(props: React.CSSProperties, locale?: string): React.CSSProperties;

/**
 * Transform logical properties for RTL
 * @param property - CSS property name
 * @param value - CSS property value
 * @param direction - Text direction
 * @returns Transformed property and value
 */
function transformRTLProperty(
  property: string, 
  value: string | number, 
  direction: 'ltr' | 'rtl'
): { property: string; value: string | number };

/**
 * Get the start/end properties for a direction
 * @param direction - Text direction
 * @returns Object with start and end property mappings
 */
function getDirectionalProperties(direction: 'ltr' | 'rtl'): {
  start: 'left' | 'right';
  end: 'left' | 'right';
};

Usage Examples:

import { useLocale, getRTLStyles } from "react-aria";

// RTL-aware component styling
function DirectionalBox({ children }) {
  const { direction } = useLocale();
  
  const styles = getRTLStyles({
    paddingInlineStart: 16,
    paddingInlineEnd: 8,
    marginInlineStart: 'auto',
    borderInlineStartWidth: 2
  });
  
  return (
    <div style={styles} dir={direction}>
      {children}
    </div>
  );
}

// Conditional RTL styling
function FlexContainer({ children }) {
  const { direction } = useLocale();
  
  return (
    <div style={{
      display: 'flex',
      justifyContent: direction === 'rtl' ? 'flex-end' : 'flex-start',
      textAlign: direction === 'rtl' ? 'right' : 'left'
    }}>
      {children}
    </div>
  );
}

Calendar Systems

Support for different calendar systems across cultures.

/**
 * Get supported calendar systems
 * @returns Array of supported calendar identifiers
 */
function getSupportedCalendars(): string[];

/**
 * Get the default calendar for a locale
 * @param locale - Target locale
 * @returns Default calendar identifier
 */
function getDefaultCalendar(locale: string): string;

/**
 * Check if a calendar is supported
 * @param calendar - Calendar identifier
 * @returns Whether calendar is supported
 */
function isCalendarSupported(calendar: string): boolean;

Types

type Locale = string;

type Direction = 'ltr' | 'rtl';

interface LocaleInfo {
  /** Locale identifier */
  locale: Locale;
  /** Text direction */
  direction: Direction;
  /** Language code */
  language: string;
  /** Country/region code */
  region?: string;
  /** Script code */
  script?: string;
}

interface DateFormatterOptions extends Intl.DateTimeFormatOptions {
  /** Calendar system */
  calendar?: string;
  /** Number system */
  numberingSystem?: string;
  /** Time zone */
  timeZone?: string;
  /** Hour cycle */
  hourCycle?: 'h11' | 'h12' | 'h23' | 'h24';
}

interface LocalizedStrings {
  [locale: string]: {
    [key: string]: string | ((values: Record<string, any>) => string);
  };
}

interface CollationOptions extends Intl.CollatorOptions {
  /** Locale to use for collation */
  locale?: string;
  /** Custom collation rules */
  rules?: string;
}

interface FilterOptions {
  /** Sensitivity for matching */
  sensitivity?: 'base' | 'accent' | 'case' | 'variant';
  /** Whether to ignore punctuation */
  ignorePunctuation?: boolean;
  /** Numeric comparison */
  numeric?: boolean;
  /** Usage optimization */
  usage?: 'sort' | 'search';
}

Supported Locales:

React Aria includes built-in support for the following locales:

  • Arabic (ar-AE)
  • Bulgarian (bg-BG)
  • Czech (cs-CZ)
  • German (de-DE)
  • Greek (el-GR)
  • English (en-US)
  • Spanish (es-ES)
  • Finnish (fi-FI)
  • French (fr-FR)
  • Hebrew (he-IL)
  • Croatian (hr-HR)
  • Hungarian (hu-HU)
  • Italian (it-IT)
  • Japanese (ja-JP)
  • Korean (ko-KR)
  • Lithuanian (lt-LT)
  • Latvian (lv-LV)
  • Norwegian Bokmål (nb-NO)
  • Dutch (nl-NL)
  • Polish (pl-PL)
  • Portuguese (pt-BR)
  • Romanian (ro-RO)
  • Russian (ru-RU)
  • Slovak (sk-SK)
  • Slovenian (sl-SI)
  • Serbian (sr-SP)
  • Swedish (sv-SE)
  • Turkish (tr-TR)
  • Ukrainian (uk-UA)
  • Chinese Simplified (zh-CN)
  • Chinese Traditional (zh-TW)

Each locale includes proper translations for accessibility strings, date/time formatting, and cultural adaptations.

Install with Tessl CLI

npx tessl i tessl/npm-react-aria

docs

date-time.md

drag-drop.md

focus-management.md

form-controls.md

index.md

interactions.md

internationalization.md

layout-navigation.md

overlays-modals.md

selection-controls.md

tags.md

toast-notifications.md

utilities.md

tile.json