Nerds Publishing Monstrosities


    0.11.0 • Public • Published


    Internationalize legacy react apps in a lunch break.

    i18nize-react finds and replaces all the hardcoded string literals in your react project with i18n bindings. It uses babel to walk on react components and process them.


    Getting started

    1. First install the i18nize-react globally using npm
    npm i -g i18nize-react
    1. Now in your react app run
    npm install i18next

    Tested on i18next other variants should work with minor changes.

    Make sure there are no unstaged changes, you may need to git reset --hard.

    1. Now run.
    1. Go for lunch

    2. Run your favourite linter to clean things up.

    3. It should create four files src/i18n/init.js, src/i18n/keys.js, src/i18n/english.js, src/i18n/chinese.js. Add the line import ./i18n/init.js; in your App's entry point. Usually it is src/index.js.

    4. Change the lng key in your browser's local storage to see changes.


    Create an issue ticket with a before and after code snippets, before writing any code and raising a PR.

    For bugs create a minimum reproducible piece of code with original, received and expected snippets.

    Make sure to read


    1. Sometimes i18ize-react might conflict with the babel plugins installed in your project. If that happens go up one folder (cd ..) and then run i18ize-react ./your-dir ./your-dir

    2. By default i18ize-react assumes that your code is in <your workspace dir>/src but if you want to change that you can use the third argument. e.g. i18ize-react ./ ./ web will crawl <your workspace dir>/web instead.

    3. Constant initialization outside react lifecycle is not guaranteed. To resolve this, move all initialized strings inside the component.

    // String 1 might not load correctly 
    const string1 = i18next.t(k.STRING1);
    const MyComponent = () => {
      // String 2 will load correctly
      const string2 = i18next.t(k.STRING2);
      return (
    1. TIP: Babel's parse and generate often shifts code around which causes files, with no programatic change, to show up in git diff. Sometimes running the linter alone does not fix this problem. A good way to fix this problem is to do a dry run i18nize-react ./ ./ src true, run your linter and commit the code. Now run i18nize-react to run the transform and lint again. Now only the transformed changes should show up in git diff.


    npm i i18nize-react

    DownloadsWeekly Downloads






    Unpacked Size

    121 kB

    Total Files


    Last publish


    • ghost---shadow