https://github.com/akameco/extract-react-intl-messages
extract react intl messages
https://github.com/akameco/extract-react-intl-messages
extract i18n messages react react-intl react-intl-auto
Last synced: 10 months ago
JSON representation
extract react intl messages
- Host: GitHub
- URL: https://github.com/akameco/extract-react-intl-messages
- Owner: akameco
- License: mit
- Created: 2017-04-23T07:03:41.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:47:20.000Z (about 3 years ago)
- Last Synced: 2025-05-12T12:45:55.856Z (10 months ago)
- Topics: extract, i18n, messages, react, react-intl, react-intl-auto
- Language: TypeScript
- Homepage:
- Size: 1.93 MB
- Stars: 182
- Watchers: 4
- Forks: 42
- Open Issues: 44
-
Metadata Files:
- Readme: readme.md
- License: license
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-list - extract-react-intl-messages
README
# extract-react-intl-messages
[](https://github.com/akameco/extract-react-intl-messages/actions?query=workflow%3Atest)
[](https://github.com/facebook/jest)
[](https://github.com/prettier/prettier)
[](./license)
[](#contributors-)
This package will generate json or yaml files from a glob. It will generate one file per locale, with the ids of each message defined by the [`defineMessages`](https://github.com/yahoo/react-intl/wiki/API#definemessages) function of [react-intl](https://github.com/yahoo/react-intl). The value of each of these keys will be an empty string, except for your `defaultLocale` which will be populated with the [`defaultMessage`](https://github.com/yahoo/react-intl/wiki/API#message-descriptor).
## Dependencies
### Babel
- 0.x works with Babel 6
## Install
```
$ npm install --save-dev extract-react-intl-messages
```
## Usage
app/components/App/messages.js
```js
import { defineMessages, useIntl } from 'react-intl'
export default defineMessages({
hello: {
id: 'a.hello',
defaultMessage: 'hello'
},
world: {
id: 'a.world',
defaultMessage: 'world'
}
})
export const SubmitButton = () => {
const intl = useIntl()
const label = intl.formatMessage({
id: 'a.submit',
defaultMessage: 'Submit Button'
})
return {label}
}
```
### Run Script
```
$ extract-messages -l=en,ja -o app/translations -d en --flat false './app/**/!(*.test).js'
```
### Output
app/translations/en.json
```json
{
"a": {
"hello": "hello",
"world": "world",
"submit": "Submit Button"
}
}
```
app/translations/ja.json
```json
{
"a": {
"hello": "",
"world": "",
"submit": ""
}
}
```
## Recommend
Use with [babel-plugin-react-intl-auto: i18n for the component age. Auto management react-intl ID.](https://github.com/akameco/babel-plugin-react-intl-auto)
## CLI
```console
$ extract-messages --help
Extract react-intl messages
Usage
$ extract-react-intl-messages
$ extract-messages
Options
-o, --output Output directory [require: true]
-l, --locales locales [require: true]
-f, --format json | yaml [default: json]
-d, --defaultLocale default locale
--overwriteDefault default: false
--flat json [default: true] | yaml [default: false]
Example
$ extract-messages --locales=ja,en --output app/translations 'app/**/*.js'
$ extract-messages -l=ja,en -o i18n 'src/**/*.js'
$ extract-messages -l=ja,en -o app/translations -f yaml 'app/**/messages.js'
```
### create-react-app user
create `.babelrc` like this.
```json
{
"presets": ["react-app"]
}
```
Run with `NODE_ENV=development`.
```
$ NODE_ENV=development extract-messages ...
```
### TypeScript
babel required.
See [example/with-typescript](example/with-typescript)
```
npm install --save-dev @babel/core @babel/preset-typescript @babel/preset-react
```
`babel.config.js`
```js
module.exports = function (api) {
api.cache(true)
return {
presets: ['@babel/preset-react', '@babel/preset-typescript']
}
}
```
## API
### extractReactIntlMessages(locales, input, buildDir, [options])
#### locales
Type: `Array`
Example: `['en', 'ja']`
#### input
Type: `Array`
Target files.
glob.
#### buildDir
Type: `string`
Export directory.
#### options
##### defaultLocale
Type: `string`
Default: `en`
##### format
Type: `json` | `yaml`
Default: `json`
Set extension to output.
##### overwriteDefault
Type: `boolean`
Default: true
If overwriteDefault is `false`, it will not overwrite messages in the default locale.
##### flat
Type: `boolean`
Default: `true`
If format is `yaml`, set to `false`.
Be careful if `false`.
See [this issue](https://github.com/akameco/extract-react-intl-messages/issues/3).
##### babel-plugin-react-intl's Options
See https://github.com/formatjs/formatjs/tree/master/packages/babel-plugin-react-intl#options
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
akameco
💻 ⚠️ 📖 🚇
Hoan Tran
💻 ⚠️
giantpinkwalrus
💻
enrique-ramirez
📖
Stefan Gojan
🐛 💻 ⚠️
Solomon English
💻
Filip "Filson" Pasternak
💻
nodaguti
💻 ⚠️
fix-fix
💻
bradbarrow
🐛 💻 ⚠️
Gregor MacLennan
💻
Dmitry Zarva
💻
Michael Pan
💡
Tom Erik Støwer
💻
Bart Lens
💻
Truong Hoang Dung
💡
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
## License
MIT © [akameco](http://akameco.github.io)