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 generates a prefixed id.
Also, we strongly encourage you to use extract-react-intl-messages. You can generate json automatically.
Goodbye, global ID!!
import { defineMessages, FormattedMessage } from 'react-intl'
export default defineMessages({
hello: {
id: 'App.Components.Greeting.hello',
defaultMessage: 'hello {name}',
},
welcome: {
id: 'App.Components.Greeting.welcome',
defaultMessage: 'Welcome!',
},
})
const MyComponent = () => (
<FormattedMessage
id="App.Components.Greeting.goodbye"
defaultMessage="goodbye {name}"
/>
)With babel-plugin-react-intl-auto.
import { defineMessages, FormattedMessage } from 'react-intl'
export default defineMessages({
hello: 'hello {name}',
welcome: 'Welcome!',
})
const MyComponent = () => <FormattedMessage defaultMessage="goodbye {name}" />See examples.
Example usage with extract-react-intl-messages.
$ extract-messages -l=en -o translations 'src/**/*.js'
en.json
{
"components.App.hello": "hello {name}",
"components.App.welcome": "Welcome",
"components.App.189751785": "goodbye {name}" // unique hash of defaultMessage
}npm
$ npm install --save-dev babel-plugin-react-intl-auto
# Optional: TypeScript support
$ npm install --save-dev @babel/plugin-transform-typescriptyarn
$ yarn add --dev babel-plugin-react-intl-auto
# Optional: TypeScript support
$ yarn add --dev @babel/plugin-transform-typescript.babelrc
{
"plugins": [
[
"react-intl-auto",
{
"removePrefix": "app/",
"filebase": false
}
]
]
}Input:
import { injectIntl } from 'react-intl'
const MyComponent = ({ intl }) => {
const label = intl.formatMessage({ defaultMessage: 'Submit button' })
return <button aria-label={label}>{label}</button>
}
injectIntl(MyComponent)↓ ↓ ↓
Output:
import { injectIntl } from 'react-intl'
const MyComponent = ({ intl }) => {
const label = intl.formatMessage({
id: 'App.Components.Button.label',
defaultMessage: 'Submit button',
})
return <button aria-label={label}>{label}</button>
}
injectIntl(MyComponent)Input:
import { useIntl } from 'react-intl'
const MyComponent = () => {
const intl = useIntl()
const label = intl.formatMessage({ defaultMessage: 'Submit button' })
return <button aria-label={label}>{label}</button>
}↓ ↓ ↓
Output:
import { useIntl } from 'react-intl'
const MyComponent = () => {
const intl = useIntl()
const label = intl.formatMessage({
id: 'App.Components.Button.label',
defaultMessage: 'Submit button',
})
return <button aria-label={label}>{label}</button>
}remove prefix.
Type: string | boolean | regexp
Default: ''
if removePrefix is true, no file path prefix is included in the id.
when removePrefix is "src"
import { defineMessages } from 'react-intl';
export default defineMessages({
hello: 'hello world'
});
↓ ↓ ↓ ↓ ↓ ↓
import { defineMessages } from 'react-intl';
export default defineMessages({
hello: {
id: 'components.App.hello',
defaultMessage: 'hello world'
}
});when removePrefix is "src.components"
import { defineMessages } from 'react-intl';
export default defineMessages({
hello: 'hello world'
});
↓ ↓ ↓ ↓ ↓ ↓
import { defineMessages } from 'react-intl';
export default defineMessages({
hello: {
id: 'App.hello',
defaultMessage: 'hello world'
}
});when removePrefix is true
import { defineMessages } from 'react-intl';
export default defineMessages({
hello: 'hello world'
});
↓ ↓ ↓ ↓ ↓ ↓
import { defineMessages } from 'react-intl';
export default defineMessages({
hello: {
id: 'hello',
defaultMessage: 'hello world'
}
});Type: boolean
Default: false
if filebase is true, generate id with filename.
Type: string
Default: react-intl
if set, enables to use custom module as a source for defineMessages etc.
Type: boolean | 'all'
Default: false
if includeExportName is true, adds named exports as part of the id.
Only works with defineMessages.
export const test = defineMessages({
hello: 'hello {name}',
})
↓ ↓ ↓ ↓ ↓ ↓
export const test = defineMessages({
hello: {
id: 'path.to.file.test.hello',
defaultMessage: 'hello {name}',
},
})If includeExportName is 'all', it will also add default to the id on default
exports.
Use leading comments as the message description.
Only works with defineMessages
Type: boolean
Default: true
export const test = defineMessages({
// Message used to greet the user
hello: 'hello {name}',
})
↓ ↓ ↓ ↓ ↓ ↓
export const test = defineMessages({
hello: {
id: 'path.to.file.test.hello',
defaultMessage: 'hello {name}',
description: 'Message used to greet the user',
},
})Only works with intl.formatMessage, FormattedMessage and FormattedHTMLMessage. Instead of
generating an ID by hashing defaultMessage, it will use the key property if
it exists.
Type: boolean
Default: false
intl.formatMessage({
key: 'foobar',
defaultMessage: 'hello'
});
↓ ↓ ↓ ↓ ↓ ↓
intl.formatMessage({
key: 'foobar',
defaultMessage: 'hello',
"id": "path.to.file.foobar"
});<FormattedMessage key="foobar" defaultMessage="hello" />
↓ ↓ ↓ ↓ ↓ ↓
<FormattedMessage id="path.to.file.foobar" key="foobar" defaultMessage="hello" />Allows you to specify a custom separator
Type: string
Default: .
when separator is "_"
export const test = defineMessages({
hello: 'hello {name}',
})
↓ ↓ ↓ ↓ ↓ ↓
export const test = defineMessages({
hello: {
id: 'path_to_file_test_hello',
defaultMessage: 'hello {name}',
},
})Allows you to specify the directory that is used when determining a file's prefix.
This option is useful for monorepo setups.
Type: string
Default: process.cwd()
Folder structure with two sibling packages. packageB contains babel config and depends on packageA.
|- packageA
| |
| -- componentA
|
|- packageB
| |
| -- componentB
| |
| -- .babelrcSet relativeTo to parent directory in packageB babel config
{
"plugins": [
[
"react-intl-auto",
{
"relativeTo": "..",
// ...
},
],
]
}Run babel in packageB
cd packageB && babelMessages in componentA are prefixed relative to the project root
export const test = defineMessages({
hello: 'hello {name}',
})
↓ ↓ ↓ ↓ ↓ ↓
export const test = defineMessages({
hello: {
id: 'packageA.componentA.hello',
defaultMessage: 'hello {name}',
},
})const messages = { hello: 'hello world' }
export default defineMessages(messages)
↓ ↓ ↓ ↓ ↓ ↓
const messages = {
hello: {
id: 'path.to.file.hello',
defaultMessage: 'hello wolrd'
}
};
export default defineMessages(messages);TypeScript support is bundled with this package. Be sure to include our type
definition and run @babel/plugin-transform-typescript beforehand. This way,
you can also be empowered by extract-react-intl-messages.
{
"compilerOptions": {
// ...
"jsx": "preserve"
// ...
},
"include": ["node_modules/babel-plugin-react-intl-auto/**/*.d.ts"]
}{
"plugins": [["@babel/plugin-transform-typescript"], ["react-intl-auto"]]
}Use babel-loader along with ts-loader when using webpack as well.
module.exports = {
module: {
rules: [
{
test: /\.tsx?$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
},
{
loader: 'ts-loader',
},
],
},
],
},
}If you want short consistent hash values for the ID, you can use react-intl-id-hash in addition to this plugin to help reduce your applications bundle size.
Extract react-intl messages.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT © akameco
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent