Provider.md

Context provider which keeps track of all translations and provides methods to change language and to load more translations. Wrap your application with this component.

<Provider>
  <App />
</Provider>

Props

// Preloaded translation map.
const preloaded = {
  en: {
    main: {
      Hello: 'Hello',
      welcome: 'Welcome!',
    },
  },
};

<Provider
  locale="en"
  defaultLocale="en"
  ns="main"
  map={preloaded}
  loader={async (locale, namespace) => { /*...*/ }}
>
  <Demo />
</Provider>

Reference

• locale — initial selected locale, defaults to 'en'.
• defaultLocale — locale to fall-back to, if translation is not found in current locale, defaults to 'en'.
• ns — default namespace, defaults to 'main'.
• map — collection of initial preloaded translations, in format {locale: {namespace: {key: value}}}.
• loader — method to be called when new translations are loaded, receives two arguments: locale and namespace; should return a promise that resolves to {key: value} map.

State

<Provider> component provides its state using React context. The state object has the following attributes.

• locale — currently selected locale.
• map — map of all translations in {locale: {namespace: {key: value}}} form.
• load — function that can be called to preload translations await load(locale, namespace).
• setLocale — function to change current locale setLocale('de')
• createT — factory that creates a translation function t given namespaces createT(['main']).