Gathering detailed insights and metrics for babel-plugin-react-intl-auto-ext
Gathering detailed insights and metrics for babel-plugin-react-intl-auto-ext
Gathering detailed insights and metrics for babel-plugin-react-intl-auto-ext
Gathering detailed insights and metrics for babel-plugin-react-intl-auto-ext
i18n for the component age. Auto management react-intl ID.
npm install babel-plugin-react-intl-auto-ext
Typescript
Module System
Node Version
NPM Version
JavaScript (100%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
264 Commits
1 Watchers
2 Branches
1 Contributors
Updated on Sep 05, 2019
Latest Version
1.5.1
Package Id
babel-plugin-react-intl-auto-ext@1.5.1
Unpacked Size
23.66 kB
Size
7.11 kB
File Count
6
NPM Version
6.1.0
Node Version
10.4.1
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
2
23
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!!
1import { defineMessages, FormattedMessage } from 'react-intl' 2 3export default defineMessages({ 4 hello: { 5 id: 'App.Components.Greeting.hello', 6 defaultMessage: 'hello {name}', 7 }, 8 welcome: { 9 id: 'App.Components.Greeting.welcome', 10 defaultMessage: 'Welcome!', 11 }, 12}) 13 14const MyComponent = () => ( 15 <FormattedMessage 16 id="App.Components.Greeting.goodbye" 17 defaultMessage="goodbye {name}" 18 /> 19)
With babel-plugin-react-intl-auto.
1import { defineMessages, FormattedMessage } from 'react-intl' 2 3export default defineMessages({ 4 hello: 'hello {name}', 5 welcome: 'Welcome!', 6}) 7 8const MyComponent = () => <FormattedMessage defaultMessage="goodbye {name}" />
See examples.
extract-react-intl-messages
Example usage with extract-react-intl-messages.
$ extract-messages -l=en -o translations 'src/**/*.js'
en.json
1{ 2 "components.App.hello": "hello {name}", 3 "components.App.welcome": "Welcome", 4 "components.App.189751785": "goodbye {name}" // unique hash of defaultMessage 5}
npm
$ npm install --save-dev babel-plugin-react-intl-auto
yarn
$ yarn add --dev babel-plugin-react-intl-auto
.babelrc
1{ 2 "plugins": [ 3 [ 4 "react-intl-auto", 5 { 6 "removePrefix": "app/", 7 "filebase": false 8 } 9 ] 10 ] 11}
remove prefix.
Type: string | boolean
Default: ''
if removePrefix
is true
, no file path prefix is included in the id.
when removePrefix
is "src"
1import { defineMessages } from 'react-intl'; 2 3export default defineMessages({ 4 hello: 'hello world' 5}); 6 7 ↓ ↓ ↓ ↓ ↓ ↓ 8 9import { defineMessages } from 'react-intl'; 10 11export default defineMessages({ 12 hello: { 13 id: 'components.App.hello', 14 defaultMessage: 'hello world' 15 } 16});
when removePrefix
is true
1import { defineMessages } from 'react-intl'; 2 3export default defineMessages({ 4 hello: 'hello world' 5}); 6 7 ↓ ↓ ↓ ↓ ↓ ↓ 8 9import { defineMessages } from 'react-intl'; 10 11export default defineMessages({ 12 hello: { 13 id: 'hello', 14 defaultMessage: 'hello world' 15 } 16});
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
.
1export const test = defineMessages({
2 hello: 'hello {name}',
3})
4
5 ↓ ↓ ↓ ↓ ↓ ↓
6
7export const test = defineMessages({
8 hello: {
9 id: 'path.to.file.test.hello',
10 defaultMessage: 'hello {name}',
11 },
12})
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
1export const test = defineMessages({
2 // Message used to greet the user
3 hello: 'hello {name}',
4})
5
6 ↓ ↓ ↓ ↓ ↓ ↓
7
8export const test = defineMessages({
9 hello: {
10 id: 'path.to.file.test.hello',
11 defaultMessage: 'hello {name}',
12 description: 'Message used to greet the user',
13 },
14})
1const messages = { hello: 'hello world' } 2 3export default defineMessages(messages) 4 5 ↓ ↓ ↓ ↓ ↓ ↓ 6 7const messages = { 8 hello: { 9 id: 'path.to.file.hello', 10 defaultMessage: 'hello wolrd' 11 } 12}; 13 14export default defineMessages(messages);
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):
akameco 💻 ⚠️ 👀 📖 | Aleksander Heintz 💻 📖 | Ryan Leckey 💻 | Adam 💻 📖 | Guylian Cox 💻 📖 ⚠️ | Carl Grundberg 💡 📖 | bradbarrow 💻 📖 ⚠️ |
---|---|---|---|---|---|---|
Mauro Gabriel Titimoli 💻 ⚠️ | Stanislav Ermakov 💻 | Chitoku 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT © akameco
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
no SAST tool detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
124 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More