Skip to content
Extract react-intl messages with babel-plugin-macros.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
flow-typed/npm chore(deps): ncu update Feb 11, 2019
src fix: Replace ts and tsx extensions with json in outputFilename (#69) Mar 12, 2019
.editorconfig refactor(deps): make npm and scripts up-to-date (#28) Jan 25, 2019
.eslintignore
.flowconfig test(flow): add fail cases Feb 11, 2019
.gitignore
.prettierignore refactor(deps): make npm and scripts up-to-date (#28) Jan 25, 2019
.prettierrc.js refactor(deps): make npm and scripts up-to-date (#28) Jan 25, 2019
.travis.yml chore(deps): remove babel bridge (#57) Feb 15, 2019
CHANGELOG.md docs(CHANGELOG): release 0.3.6 Mar 12, 2019
LICENSE refactor(deps): make npm and scripts up-to-date (#28) Jan 25, 2019
README.md chore(deps): remove babel bridge (#57) Feb 15, 2019
babel-plugin-macros.config.js feat(config): add `verbose` config to disable log messages (#37) Jan 29, 2019
package.json
renovate.json fix(dependency): pinOnlyDevDependencies Jan 25, 2018
setupTests.js feat(Components): add support for FormattedMessage and FormattedHTMLM… Jan 29, 2019
yarn.lock chore(deps): update dependency hsu-scripts to v1.0.7 (#62) Feb 22, 2019

README.md

react-intl.macro

Extract react-intl messages with babel-plugin-macros.

Travis Codecov Status npm package npm downloads

prettier license

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 >= 11.10.0
  • yarn >= 1.13.0
$ 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

You can’t perform that action at this time.