babel-plugin-react-i18next

A babel plugin to help you to invoke some i18n-related translation functions globally.

DEMO

Installation

• YARN

   yarn add babel-plugin-react-i18next --dev

• NPM

   npm i babel-plugin-react-i18next --save-dev

Usage

First of all, make sure react-i18next and i18next are both installed, if not, install them.

Then add babel-plugin-react-i18next to the plugins section of your babel configuration file such as .babelrc. Once done, When you initialize i18n, you don't have to invoke i18n-related functions in JSX/TSX files.

{
  "plugins": ["babel-plugin-react-i18next"]
}

You can also use additional options to control which snippet type to be compiled.

All default values are true.

More options are in preparation

{
  "plugins": [
    [
      "babel-plugin-react-i18next",
      {
        "JSXText": false
      }
    ]
  ]
}

The following are the supported conversion types.

JSXText

-   <div> What a save! </div>
+   <div> {t('What a save!')} </div>

JXSExpressionContainer

-   {'What a save!'}
+   {t('What a save!')}

JSXElement (only 2 levels of relationship)

-   <div> hello <h3> zixiCat </h3> </div>
+   <div> <Trans> hello <h3> zixiCat </h3> </Trans> </div>

JSXAttribute (it will not change the className attribute)

-   <div attr='What a save!'></div>
+   <div attr={t('What a save!')}></div>

Of course, some modules had been imported

+   import {Trans} from "react-i18next";
+   import i18next from "i18next";

Bug tracker

If you find a bug, please report it here on Github!