react-i18n

i18n utilities for React handling translations.

Install

npm install --save react-i18n

Example

import { IntlProvider, useIntl } from 'react-i18n'

const translations = {
    EN: {
      sample: {
        hello: 'Hello World!'
      },
    },
    FR: {
      sample: {
        hello: 'Bonjour Monde!'
      },
    },
};

const Example = () => (
  <IntlProvider locale='en' translations={translations}>
    <MyComponent />
  </IntlProvider>
)

const MyComponent = () => {
  const { t, setLocale } = useIntl()

  return (
    <>
      <p>{t('sample.hello')}</p>
      <button onClick={() => setLocale('fr')}>Switch to `FR`</button>
    </>
  )
}

Usage

IntlProvider

Component used to provide i18n context to child components.

• locale - The locale language, it will be converted to uppercase in order to matches the keys in translations.
• translations - This should be an object where keys are locales, and values are maps of message keys to translated strings.

useIntl

Provides a React hook which lets you call into the translate function directly.

• t - The locale to translate things into.
• setLocale - Set current locale to another.

import { Intl } from 'react-i18n'

const Component = () => {
  const { t, setLocale } = useIntl()
  return (
    <>
      <p>{t('sample.hello')}</p>
      <button onClick={() => setLocale('fr')}>Switch to `FR`</button>
    </>
  );
}

Intal

Get the translate function in render props way.

• t - The locale to translate things into.
• setLocale - Set current locale to another.

import { useIntl } from 'react-i18n'

const Component = () => (
  <Intl>
    {({ t, setLocale }) => {
      return (
        <p>{t('sample.hello')}</p>
        <button onClick={() => setLocale('fr')}>Switch to `FR`</button>
      )
    }}
  <Intl />
)

License

MIT © @houhoucoop