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

Context and Locale Management

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

Core context provider and locale detection functionality for establishing internationalization context throughout React applications.

Capabilities

I18nProvider Component

Provides locale context to all child components with automatic RTL detection and locale inheritance.

/**
 * Provides the locale for the application to all child components
 * @param props - I18nProvider configuration
 */
function I18nProvider(props: I18nProviderProps): JSX.Element;

interface I18nProviderProps {
  /** Contents that should have the locale applied */
  children: ReactNode;
  /** The locale to apply to the children */
  locale?: string;
}

Usage Examples:

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

// With explicit locale
function App() {
  return (
    <I18nProvider locale="fr-FR">
      <MyComponent />
    </I18nProvider>
  );
}

// Auto-detect system locale
function AppWithAutoLocale() {
  return (
    <I18nProvider>
      <MyComponent />
    </I18nProvider>
  );
}

useLocale Hook

Returns the current locale and layout direction from the nearest I18nProvider or system default.

/**
 * Returns the current locale and layout direction
 * @returns Locale object with locale string and text direction
 */
function useLocale(): Locale;

interface Locale {
  /** The BCP47 language code for the locale */
  locale: string;
  /** The writing direction for the locale */
  direction: Direction;
}

type Direction = "ltr" | "rtl";

Usage Examples:

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

function LocaleDisplay() {
  const { locale, direction } = useLocale();
  
  return (
    <div dir={direction}>
      <p>Current locale: {locale}</p>
      <p>Text direction: {direction}</p>
    </div>
  );
}

// Conditional rendering based on locale
function ConditionalContent() {
  const { locale } = useLocale();
  const isArabic = locale.startsWith('ar');
  
  return (
    <div>
      {isArabic ? <ArabicContent /> : <DefaultContent />}
    </div>
  );
}

Default Locale Detection

Utilities for detecting and monitoring the browser's default locale.

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

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

Usage Examples:

import { getDefaultLocale, useDefaultLocale } from "@react-aria/i18n";

// Get locale once
const browserLocale = getDefaultLocale();
console.log(browserLocale.locale); // e.g., "en-US"

// React hook that updates on language changes
function LanguageMonitor() {
  const locale = useDefaultLocale();
  
  return <p>System locale: {locale.locale}</p>;
}

RTL Detection Utility

Determines text direction for any locale string.

/**
 * 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;

Usage Examples:

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

// Check if locale is RTL
const isArabicRTL = isRTL("ar-SA"); // true
const isEnglishRTL = isRTL("en-US"); // false
const isHebrewRTL = isRTL("he-IL"); // true

// Apply conditional styling
function DirectionalContent({ locale }: { locale: string }) {
  const textAlign = isRTL(locale) ? "right" : "left";
  
  return (
    <div style={{ textAlign }}>
      Content aligned based on locale direction
    </div>
  );
}

Install with Tessl CLI