This is a command line tool to help extracting dictionaries from react-intl apps written in es6 and typescript.
If your app is internationalized using react-intl
, you use the component <FormattedMessage>
(and other react-intl components) for i18n strings.
This tool configures babel, react intl and babel-plugin-react-intl and offers a simple command to manage your app's dictionaries.
npm i react-intl-extract
npx react-intl-extract [options]
-l
(--locales
): list of languages, it will produce a dictionary for every language, comma separated (deafult:en,it
)-s
(--src
): source directory, where your.jsx|.tsx
files are located (default${cwd}/src
)-o
(--output
): destination directory, where your dictionaries will be saved (default${cwd}/locales
)-v
(--version
): shows script version-h
(--help
): shows available options
npx react-intl-extract -s src -o lib/locales -l en,it,es,fr
Directory structure:
- /
- /lib
- /locales
- en.json
- es.json
- fr.json
- index.ts
- it.json
- /src
- ...jsx
- ...tsx
import extract from 'react-intl-extract';
extract({
locales: ['en', 'it', 'es'],
src: `${__dirname}/src`,
output: `${__dirname}/locales`
});
This module extracts only the <FormattedMessage>
and <FormattedHTMLMessage>
jsx tags, and the defineMessages()
function, as you can see here.
This is reported also in the react-intl issues.
If you need to use a string, as example in a prop, use this form:
<Tag prop={(
() => <FormattedMessage id='' defaultMessage='' />
)()} ></Tab>