Awesome
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.js
import * 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.js
module.exports = {
'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 changelog
git 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.