Skip to content

akameco/extract-react-intl-messages

Folders and files

NameName
Last commit message
Last commit date
Mar 24, 2020
Apr 5, 2020
Apr 21, 2020
May 9, 2020
Apr 5, 2020
Apr 23, 2017
Aug 8, 2019
Aug 24, 2019
Aug 8, 2019
Sep 5, 2019
Nov 30, 2019
Sep 9, 2017
May 29, 2018
Mar 19, 2020
Apr 23, 2017
Apr 21, 2020
May 9, 2020
Sep 4, 2019
Aug 24, 2019
Mar 24, 2020

Repository files navigation

extract-react-intl-messages

test tested with jest styled with prettier MIT License All 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 function of 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.

Dependencies

Babel

  • 0.x works with Babel 6

Install

$ npm install --save-dev extract-react-intl-messages

Usage

app/components/App/messages.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 <button aria-label={label}>{label}</button>
}

Run Script

$ extract-messages -l=en,ja -o app/translations -d en --flat false './app/**/!(*.test).js'

Output

app/translations/en.json

{
  "a": {
    "hello": "hello",
    "world": "world",
    "submit": "Submit Button"
  }
}

app/translations/ja.json

{
  "a": {
    "hello": "",
    "world": "",
    "submit": ""
  }
}

Recommend

Use with babel-plugin-react-intl-auto: i18n for the component age. Auto management react-intl ID.

CLI

$ extract-messages --help

  Extract react-intl messages

  Usage
  $ extract-react-intl-messages <input>
  $ extract-messages <input>

  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.

{
  "presets": ["react-app"]
}

Run with NODE_ENV=development.

$ NODE_ENV=development extract-messages ...

TypeScript

babel required.

See example/with-typescript

npm install --save-dev @babel/core @babel/preset-typescript @babel/preset-react

babel.config.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<string>

Example: ['en', 'ja']

input

Type: Array<string>

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.

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):


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 specification. Contributions of any kind welcome!

License

MIT Β© akameco