Easier i18n to be happier
react-translate can prevent you going crazy about react interpolation
npm install @rogal/react-translate --saveimport 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>
)
}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');You can check the demo folder or run the storybook so you can see advanced used cases
- 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
- i18n languages supported such as English or Spanish.
- Easy to use for dev experience
- Works with SSR
You can install and have an enviroment ready for use with Storybook
npm i
npm startMIT
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent