@react-ee/i18n

Provides Context for translating and formatting content according to selected locale.

Installation

yarn add @react-ee/i18n node-polyglot react react-dom

Usage example

Initialize i18n in i18n.ts file

import initI18n from '@react-ee/i18n';

const i18n = initI18n<'pl' | 'en'>('pl', {
  en: { hello: 'Hello', goodBye: 'Good Bye' },
  pl: { hello: 'Siemano', goodBye: 'Nara' }
});

export const I18nProvider = i18n.I18nProvider;
export const useLocaleDate = i18n.useLocaleDate;
export const useI18n = i18n.useI18n;

Wrap your app with I18nProvider:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { I18nProvider } from './i18n';

ReactDOM.render(
  <I18nProvider>
    <App />
  </I18nProvider>,
  document.getElementById('root')
);

useI18n and / or useLocaleDate somewhere in your app:

import { Button } from '@material-ui/core';
import React from 'react';
import { useI18n, useLocaleDate } from './i18n';

export default () => {
  const { t, setLocale, locale } = useI18n();
  const localeDate = useLocaleDate();

  const handleClickPL = () => setLocale('pl');
  const handleClickEN = () => setLocale('en');

  return (
    <>
      <Button onClick={handleClickPL}>PL</Button>
      <Button onClick={handleClickEN}>EN</Button>
      {t('hello')} -> {t('goodBye')}
      {localeDate(new Date(), true)} ({locale})
    </>
  );
};