This library exposes a wrapper around react-intl IntlProvider component using a new React Context API. This allows to switch language deep in a component tree in a simple way - without a need to use redux or other external library.
Just replace the original react-intl IntlProvider component with the wrapper and pass the initial props:
import { IntlProvider, loadLocaleData } from "react-intl-context-provider";
loadLocaleData(['en', 'de']); // use this instead of addLocaleData
ReactDOM.render(
<IntlProvider initialProps={{ locale: "en", defaultLocale: "en" }}>
<App />
</IntlProvider>,
document.getElementById("container")
);
... and then change the props anywhere in the app using IntlConsumer:
import { IntlConsumer } from "react-intl-context-provider";
import enTranslation from "../../static/en.json";
import deTranslation from "../../static/de.json";
const LanguageSwitcher = () => (
<IntlConsumer>
{({ updateProps, ...providerProps }) => (
<>
<button
onClick={() => updateProps({ locale: "en", messages: enTranslation })}
>
switch to english
</button>
<button
onClick={() => updateProps({ locale: "de", messages: deTranslation })}
>
> switch to deutsch
</button>
</>
)}
</IntlConsumer>
);
The updateProps
will shallowly merge new props to an old ones.
Note: changing locale will rerender everything under IntlProvider. This is desired as it will re-render the page with a newly set language.
When you try to add locales in the standard way:
import { IntlProvider } from "react-intl-context-provider";
import { addLocaleData } from "react-intl";
import en from "react-intl/locale-data/en";
import de from "react-intl/locale-data/de";
addLocaleData([...en, ...de]);
ReactDOM.render(
<IntlProvider initialProps={{ locale: "en", defaultLocale: "en" }}>
<App />
</IntlProvider>,
document.getElementById("container")
);
You will most likely encounter an error when trying to switch language:
Missing locale data for locale: "de". Using default locale: "en" as fallback.
To fix this library exposes loadLocaleData
function which accepts an Array of language-codes and is equivalent to the way above.