0
# Context and Locale Management
1

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

4
## Capabilities
5

6
### I18nProvider Component
7

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

10
```typescript { .api }
11
/**
12
 * Provides the locale for the application to all child components
13
 * @param props - I18nProvider configuration
14
 */
15
function I18nProvider(props: I18nProviderProps): JSX.Element;
16

17
interface I18nProviderProps {
18
  /** Contents that should have the locale applied */
19
  children: ReactNode;
20
  /** The locale to apply to the children */
21
  locale?: string;
22
}
23
```
24

25
**Usage Examples:**
26

27
```typescript
28
import { I18nProvider } from "@react-aria/i18n";
29

30
// With explicit locale
31
function App() {
32
  return (
33
    <I18nProvider locale="fr-FR">
34
      <MyComponent />
35
    </I18nProvider>
36
  );
37
}
38

39
// Auto-detect system locale
40
function AppWithAutoLocale() {
41
  return (
42
    <I18nProvider>
43
      <MyComponent />
44
    </I18nProvider>
45
  );
46
}
47
```
48

49
### useLocale Hook
50

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

53
```typescript { .api }
54
/**
55
 * Returns the current locale and layout direction
56
 * @returns Locale object with locale string and text direction
57
 */
58
function useLocale(): Locale;
59

60
interface Locale {
61
  /** The BCP47 language code for the locale */
62
  locale: string;
63
  /** The writing direction for the locale */
64
  direction: Direction;
65
}
66

67
type Direction = "ltr" | "rtl";
68
```
69

70
**Usage Examples:**
71

72
```typescript
73
import { useLocale } from "@react-aria/i18n";
74

75
function LocaleDisplay() {
76
  const { locale, direction } = useLocale();
77
  
78
  return (
79
    <div dir={direction}>
80
      <p>Current locale: {locale}</p>
81
      <p>Text direction: {direction}</p>
82
    </div>
83
  );
84
}
85

86
// Conditional rendering based on locale
87
function ConditionalContent() {
88
  const { locale } = useLocale();
89
  const isArabic = locale.startsWith('ar');
90
  
91
  return (
92
    <div>
93
      {isArabic ? <ArabicContent /> : <DefaultContent />}
94
    </div>
95
  );
96
}
97
```
98

99
### Default Locale Detection
100

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

103
```typescript { .api }
104
/**
105
 * Gets the locale setting of the browser
106
 * @returns Locale object with detected locale and direction
107
 */
108
function getDefaultLocale(): Locale;
109

110
/**
111
 * Returns the current browser/system language, and updates when it changes
112
 * @returns Locale object that updates on language change events
113
 */
114
function useDefaultLocale(): Locale;
115
```
116

117
**Usage Examples:**
118

119
```typescript
120
import { getDefaultLocale, useDefaultLocale } from "@react-aria/i18n";
121

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

126
// React hook that updates on language changes
127
function LanguageMonitor() {
128
  const locale = useDefaultLocale();
129
  
130
  return <p>System locale: {locale.locale}</p>;
131
}
132
```
133

134
### RTL Detection Utility
135

136
Determines text direction for any locale string.
137

138
```typescript { .api }
139
/**
140
 * Determines if a locale is read right to left using Intl.Locale
141
 * @param localeString - BCP47 language code
142
 * @returns true if locale is RTL, false otherwise
143
 */
144
function isRTL(localeString: string): boolean;
145
```
146

147
**Usage Examples:**
148

149
```typescript
150
import { isRTL } from "@react-aria/i18n";
151

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

157
// Apply conditional styling
158
function DirectionalContent({ locale }: { locale: string }) {
159
  const textAlign = isRTL(locale) ? "right" : "left";
160
  
161
  return (
162
    <div style={{ textAlign }}>
163
      Content aligned based on locale direction
164
    </div>
165
  );
166
}
167
```