react-translate: translate your React app easily

react-translate allows you to translate your React app with few lines of code of setup and a straightforward and easy API.

Features:

• Translate function
• Translate component
• Allow nested translations
• Singular, plural and zero based on count
• Lightweight (~3KB)
• Built with TypeScript
• ~99% code coverage

A simple example of a component with react-translate:

// the translation file would look like this
// {
//   model: { en: 'Model', it: 'Modello' }
//   colors: {
//     red: { en: 'Red', it: 'Rosso' },
//     green: { en: 'Green', it: 'Verde' },
//   }
//   wheels: {
//     en: ['1 wheel', '%n wheels', 'no wheels'],
//     it: ['1 ruota', '%n ruote', 'nessuna ruota'],
//   }
// }

function Vehicle(props) {
  const { name, color, wheels } = props
  const { t } = useTranslate()

  return (
    <div>
      <p>{t('model')}: {name}<p>
      <p>{t('color')}: {t(`colors.${color}`)}<p>
      <p>{t('wheelCount')}: {t('wheels', { count: wheels })}</p>
    </div>
  )
}

You can find a working example on CodeSandbox and all the docs on GitHub.