react-intl.macro
Extract react-intl messages with babel-plugin-macros.
Installation
$ yarn add react-intl.macro
Note: You'll need to install and configure babel-plugin-macros if you haven't already.
React-intl@2 should be installed in your project.
Example
evenchange4/react-intl.macro-example (with react-script@2.x) [DEMO]
Usage
Code
// Component.js-import { defineMessages } from 'react-intl';+import { defineMessages } from 'react-intl.macro'; const messages = defineMessages({ 'Component.greet': { id: 'Component.greet', defaultMessage: 'Hello, {name}!', description: 'Greeting to welcome the user to the app', },});
// Component.jsimport * as React from 'react';-import { injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage } from 'react-intl';+import { injectIntl } from 'react-intl';+import { defineMessages, FormattedMessage, FormattedHTMLMessage } from 'react-intl.macro'; const messages = defineMessages({ 'Component.greet': { id: 'defineMessages.greet', defaultMessage: 'Hello, {name}!', description: 'Greeting to welcome the user to the app', },}); class Foo extends React.Component { render() { return ( <React.Fragment> <FormattedMessage id="Foo.hello1" defaultMessage='Hello, {name}!' description='Greeting to welcome the user to the app' /> <FormattedMessage id="Foo.hello2" defaultMessage='Hello, {name}!' description='Greeting to welcome the user to the app' /> </React.Fragment> ); }} const Component = () => ( <FormattedHTMLMessage id="FormattedHTMLMessage.hello" defaultMessage='<div>Hello, {name}!</div>' description='Greeting to welcome the user to the app' />)
Extract CLI
Create React App
// package.json"scripts": { "start": "react-scripts start", "build": "react-scripts build",+ "extract": "MESSAGE_DIR='./.messages' react-scripts build"},
Next.js
"scripts": { "dev": "next", "build": "next build",+ "extract": "MESSAGE_DIR='./.messages' next build"},
API
MESSAGE_DIR: string
: The directory of output json files.
Config
Use cosmiconfig to set the babel-plugin-macros
configuration: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md#config-experimental
verbose
: To disable the log messages
default: true
// babel-plugin-macros.config.jsmoduleexports = 'react-intl': verbose: false ;
Alternative
Development
Requirements
- node >= 12.7.0
- yarn >= 1.17.3
$ yarn install --pure-lockfile
Test
$ yarn run format$ yarn run eslint$ yarn run flow$ yarn run test:watch$ yarn run build
Publish
$ npm version patch$ npm run changeloggit commit & push
CONTRIBUTING
- ⇄ Pull requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
- Pull requests must be accompanied by passing automated tests.