babel-plugin-react-intl

What is babel-plugin-react-intl?

babel-plugin-react-intl is a Babel plugin that extracts and compiles internationalized messages from React components. It is used to automate the process of extracting messages for translation, making it easier to manage and update translations in a React application.

What are babel-plugin-react-intl's main functionalities?

Message Extraction

This feature allows you to define messages in your React components using the `defineMessages` function from `react-intl`. The Babel plugin will then automatically extract these messages into a JSON file, which can be used for translation.

/* Example React component */
import { defineMessages } from 'react-intl';

const messages = defineMessages({
  greeting: {
    id: 'app.greeting',
    defaultMessage: 'Hello, World!',
    description: 'Greeting message'
  }
});

// Babel plugin will extract the messages into a JSON file

Automatic ID Generation

If you do not provide an ID for a message, the Babel plugin can automatically generate one based on the default message. This helps to ensure that each message has a unique identifier.

/* Example React component */
import { FormattedMessage } from 'react-intl';

const MyComponent = () => (
  <div>
    <FormattedMessage
      defaultMessage="Hello, World!"
      description="Greeting message"
    />
  </div>
);

// Babel plugin will generate an ID for the message if not provided

Message Compilation

You can use the Babel plugin to compile messages from your source code into a format that can be used by your application. This is typically done as part of your build process.

/* Example command to compile messages */
// In your package.json scripts
"scripts": {
  "compile-messages": "babel src --out-dir lib --plugins babel-plugin-react-intl"
}

// Run the script
// npm run compile-messages

Other packages similar to babel-plugin-react-intl

react-intl

react-intl is a library that provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations. While it does not include a Babel plugin for message extraction, it is often used in conjunction with babel-plugin-react-intl for a complete internationalization solution.

i18next

i18next is a popular internationalization framework for JavaScript that provides a complete solution for handling translations, including support for React through the react-i18next package. Unlike babel-plugin-react-intl, i18next does not rely on Babel for message extraction but instead uses a different approach for managing translations.

README

babel-plugin-react-intl

We've migrated the docs to https://formatjs.io/docs/tooling/babel-plugin/.