Wondering what’s next for npm?Check out our public roadmap! »

multilingual-translate

1.0.8 • Public • Published

Multilingual Translate for React.js

Add multilingual support to your react app with 4 easy steps. Built with React hooks and love.

Example

View Code

Installation

npm i multilingual-translate --save

Usage

  1. 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
  1. 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')
    );
  1. 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;
  1. 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;

Install

npm i multilingual-translate

DownloadsWeekly Downloads

3

Version

1.0.8

License

ISC

Unpacked Size

6.86 kB

Total Files

3

Last publish

Collaborators

  • avatar