@rogal/react-translate NPM

React-Translate

Easier i18n to be happier

react-translate can prevent you going crazy about react interpolation

Install

npm install @rogal/react-translate --save

Getting Started

import React from 'react'
import {
  TranslateProvider,
  useTranslate,
} from '@rogal/react-translate';

const Childen = () => {
  const {t} = useTranslate();
  return <p>{t('common:helloWorld')}</p>
}
const App = () => {
  const providerValue = {
    fallbackLng: 'en',
    languages: ['en', 'es'],
    translations: {
      en: {
        common: {
          helloWorld: 'Hello world'
        },
      },
      es: {
        common: {
          helloWorld: 'Hola Mundo'
        },
      }
    }
  };
  return (
    <TranslateProvider value={providerValue}>
      <Children />
    </TranslateProvider>
  )
}

How to instance a i18nConfiguration so you can use it outside of react

You only need to import the i18nConfiguration and passed the next config

import {i18nConfiguration} from '@rogal/react-translate';
import commonES from 'locales/es/common';
import commonEN from 'locales/en/common';

const i18next = i18nConfiguration({
  languages: ['es', 'en'],
    translations: {
      es: {
        common: commonES
      },
      en: {
        common: commonEN
      }
    },
    fallbackLng: 'en',
    language: 'en'
});

const translation = i18next.t('helloWorld');

More examples

You can check the demo folder or run the storybook so you can see advanced used cases

Components

A TranslateProvider to pass configuration data to the context.
useTranslate hook to use the t function in your code and translate jsonKeys to strings
withTranslate HOC to support class components
A Trans component to have a fallback when translating