Skip to content

Commit c104045

Browse files
committed
Update example to show how to use createIntl and RawIntlProvider.
1 parent f77cc17 commit c104045

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

examples/App.re

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,36 @@ let reducer = (_, action) =>
88
| SetLocale(locale) => locale
99
};
1010

11+
// As an alternative to using IntlProvider like in the main make function below,
12+
// you can construct the intl instance yourself and pass it to RawIntlProvider instead.
13+
// This is especially useful if you need to create/use the intl instance outside of a
14+
// React component.
15+
module WithRawIntlProvider = {
16+
let createIntlForLocale = locale => {
17+
let intlConfig =
18+
ReactIntl.intlConfig(
19+
~locale=locale->Locale.toString,
20+
~messages=locale->Locale.translations->Util.translationsToDict,
21+
(),
22+
);
23+
let intlCache = ReactIntl.createIntlCache();
24+
25+
ReactIntl.createIntl(intlConfig, intlCache);
26+
};
27+
28+
[@react.component]
29+
let make = () => {
30+
let (locale, dispatch) = reducer->React.useReducer(initialState);
31+
32+
let intl =
33+
React.useMemo1(() => createIntlForLocale(locale), [|locale|]);
34+
35+
<ReactIntl.RawIntlProvider value=intl>
36+
<Page locale setLocale={locale => locale->SetLocale->dispatch} />
37+
</ReactIntl.RawIntlProvider>;
38+
};
39+
};
40+
1141
[@react.component]
1242
let make = () => {
1343
let (locale, dispatch) = reducer->React.useReducer(initialState);

0 commit comments

Comments
 (0)