Comprehensive library of unstyled React hooks providing accessible UI primitives with full WAI-ARIA compliance and internationalization support.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
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.
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;
};
}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';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>;
}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>;
}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>
);
}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;
}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>;
}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>
);
}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;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:
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