Alxandr / babel-plugin-react-intl-auto

i18n for the component age. Auto management react-intl ID.

babel-plugin-react-intl-auto

i18n for the component age. Auto management react-intl ID.

React Intl is awesome. But, Global ID management is difficult and confusing.

Many projects, like react-boilerplate, give the ID to the name of the component as a prefix. But it is redundant and troublesome.

This babel-plugin releases you from cumbersome ID management. Based on the file path, this automatically generate a prefixed id.

Also, we strongly encourage you to use extract-react-intl-messages. You can generate json automatically.

Goodbye, global ID!!

Before

import { defineMessages } from 'react-intl'

export default defineMessages({
  hello: {
    id: 'App.Components.Greeting.hello',
    defaultMessage: 'hello {name}'
  },
  welcome: {
    id: 'App.Components.Greeting.welcome',
    defaultMessage: 'Welcome!'
  },
})

After

With babel-plugin-react-intl-auto.

import { defineMessages } from 'react-intl'

export default defineMessages({
  hello: 'hello {name}',
  welcome: 'Welcome!',
})

See examples.

with extract-react-intl-messages.

$ extract-messages -l=en -o translations 'src/**/*.js'

en.json

{
  "components.App.hello": "hello {name}",
  "components.App.welcome": "Welcome"
}

Install

npm

$ npm install --save-dev babel-plugin-react-intl-auto

yarn

$ yarn add --dev babel-plugin-react-intl-auto

Usage

.babelrc

{
  "plugins": [
    ["react-intl-auto", {
      "removePrefix": "app/",
      "filebase": false
    }]
  ]
}

Options

removePrefix

remove prefix.

Type: string
Default: ''

filebase

Type: boolean
Default: false

if fileBase true, Generate id with filename.

License

MIT © akameco