createTranslations()

Creates translation context, hook, higher order component, and render prop that you can use together to manage translations in your app.

import createTranslations from 'use-t/lib/createTranslations';

const {
  Provider,
  useT,
  withT,
  Trans,
  Consumer,
  context,
} = createTranslations();

Wrap your app in <Provider> component.

const preloaded = {
  en: {
    main: {
      Hello: 'Hello',
    }
  },
  fr: {
    main: {
      Hello: 'Bonjour',
    }
  },
};

<Provider map={preloaded}>
  <App />
</Provider>

Now, in your components use useT, withT, or <Trans> to translate your app.

const Hello = (props) => {
  const [t] = useT();
  return (
    <div>
      {t('Hello')}, {props.name}!
    </div>
  );
};