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

• https://github.com/yahoo/babel-plugin-react-intl
• https://github.com/evenchange4/react-intl-cra

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.

CHANGELOG

LICENSE

MIT: http://michaelhsu.mit-license.org