A Zero dependency opinionated Significa's i18n package for React.

Table of Contents

1. Usage
2. Messages object
3. Message parameters
4. License

Usage

Include the provider on the top level of your app.

Pass the messages object based on the current language selected on your app.

import { I18nProvider } from '@significa/react-i18n'

<I18nProvider messages={i18nMessages}>
  <App />
</I18nProvider>

You can either use the useTranslation helper or the Translation component

import { useTranslation } from '@significa/react-i18n'

const YourComponent = () => {
  const { t } = useTranslation()

  return (
    <div>
      <p>{t('yourMessage')}</p>
    </div>
  )
}

import { Translation } from '@significa/react-i18n'

const YourComponent = () => {
  return (
    <div>
      <Translation id="yourMessage" />
    </div>
  )
}

Messages object

Your messages object should be according to the following example.

{
  id: message,
  anotherId: anotherMessage
}

Message parameters

It's possible to add parameters to the message, a string between double curlybraces is represented as a parameter.

// Messages Object
{
  greet: "Hello {{name}}"
}

<Translation id="greet" values={{
  name: user.name   // {{name}} will be replaced by `user.name`
}} />

OR

<p>
  {t('greet', { name: user.name })}
</p>

License

MIT