Multilingual Translate for React.js
Add multilingual support to your react app with 4 easy steps. Built with React hooks and love.
Example
Installation
npm i multilingual-translate --save
Usage
- Create a separate JSON file for every required language and store them inside public/translations in your react project.
for eg
- english translations in public/translations/en.json
- hindi translations in public/translations/hin.json
- Wrap the root component with the MultiLingualTranslationWrapper component. Index.js or App.js is the best place for this to share the translations all over the app.
import MultiLingualTranslationWrapper from 'multilingual-translate';
ReactDOM.render(
<MultiLingualTranslationWrapper defLang="en" folderURL={process.env.PUBLIC_URL + '/translations'}>
<App />
</MultiLingualTranslationWrapper>
document.getElementById('root')
);
- Use the Translate function from the useTranslate hook to get translation from the json file
import { useTranslate } from 'multilingual-translate';
function App() {
let [translate] = useTranslate();
return (
<div>
{ translate('homepage.title') }
</div>
);
}
export default App;
- Change the language/translate with the ChangeLanguage function with the translation file name as the argument from useTranslate hook
import { useTranslate } from 'multilingual-translate';
function App() {
let [translate, changeLanguage] = useTranslate();
return (
<div >
{ translate('homepage.title') } <br/>
<button onClick={() => changeLanguage('hin')}> Translate To Hindi </button>
<button onClick={() => changeLanguage('en')}> Translate To English </button>
</div>
);
}
export default App;