https://github.com/eveningkid/how-to-use-react-intl
📖 How To Use React-Intl: internationalize your React app
https://github.com/eveningkid/how-to-use-react-intl
Last synced: 2 months ago
JSON representation
📖 How To Use React-Intl: internationalize your React app
- Host: GitHub
- URL: https://github.com/eveningkid/how-to-use-react-intl
- Owner: eveningkid
- License: gpl-3.0
- Created: 2017-07-28T16:30:27.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-07-29T04:47:58.000Z (almost 8 years ago)
- Last Synced: 2025-02-03T23:33:35.569Z (4 months ago)
- Size: 23.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# How To Use [React-Intl](https://github.com/yahoo/react-intl): internationalize your React app
> This short tutorial assumes you know about ES6 syntax.
* [Get started](#get-started)
* [Create a messages file](#create-a-messages-file)
* [Import messages](#import-messages)
* [Import languages](#import-languages)
* [Wrap this up](#wrap-this-up)
* [Insert messages in your app](#insert-messages-in-your-app)
* [What if I'm using Redux](#what-if-im-using-redux)
## Get started
`yarn add react-intl` or `npm i --save react-intl`.
## Create a messages file
This file should contain every message for your app.
It has an **object** of **(locale, messages)** couples:
```javascript
export default {
'en-GB': {
// We're using dots for nesting and camelCase for each name
'homepage.welcome': 'Welcome!',
'homepage.subscribeHeader': 'Subscribe Now',
// You can use placeholders using curly braces ({variable})
'user.hello': 'Hi {username}, how are you?',
// ...and also HTML
'user.signIn': 'Please, sign in'
},
'fr-FR': {
'homepage.welcome': 'Bienvenue !',
'homepage.subscribeHeader': 'Abonnez-vous',
'user.hello': 'Bonjour {username}, comment ça va ?',
'user.signIn': 'Veuillez vous connecter s\'il vous plaît'
}
};
```
Each message should be associated to a unique ID that will be required later (e.g. `homepage.welcome`).
*We'll now assume that these messages are stored in a `messages.js` file.*
## Import messages
At the **root of your app**, import your messages file:
```javascript
import messages from './messages';
```
## Import languages
For **each language you're using in your application**, you'll need one additional line on your same **app index file**:
```javascript
// If we're using English and French ('en', 'fr')
import en from 'react-intl/locale-data/en';
import fr from 'react-intl/locale-data/fr';
// But if you need Spanish for example, you'd then need to import
import es from 'react-intl/locale-data/es';
```
And then tell `react-intl` to use them (we'll import `addLocaleData` right after):
```javascript
addLocaleData([...en, ...fr]);
```
## Wrap this up
It's now time to provide the messages to all our components.
Here, we'll need both `IntlProvider` and `addLocaleData` (from the previous step):
```javascript
// Paste this before the previous imports
import { addLocaleData, IntlProvider } from 'react-intl';
```
Look up for the user's locale:
```javascript
const locale = (navigator.languages && navigator.languages[0])
|| navigator.language
|| navigator.userLanguage
|| 'en-US';
```
And add the provider to your app:
```jsx
ReactDOM.render((
{/* Previous code... */}
, document.getElementById('root'));
```
*As you can see, we're telling `react-intl` what locale and messages should be used, through its props.*
## Insert messages in your app
You can now use every message you put into your `messages.js` file, inside your app.
- [`FormattedMessage`](https://github.com/yahoo/react-intl/wiki/Components#string-formatting-components): for normal messages:
```jsx
import { FormattedMessage } from 'react-intl';
class HomePage extends React.Component {
render() {
return (
);
}
}
```
- [`FormatedHTMLMessage`](https://github.com/yahoo/react-intl/wiki/Components#string-formatting-components): for every message containing HTML syntax:
```jsx
```
- [`FormattedDate` & `FormattedTime`](https://github.com/yahoo/react-intl/wiki/Components#date-formatting-components): yup, for every date/time related message (they both need a Unix timestamp in ms):
```jsx
```
- [`FormattedRelative`](https://github.com/yahoo/react-intl/wiki/Components#date-formatting-components): 10 days ago..., and so on:
```jsx
```
- [`FormattedNumber`](https://github.com/yahoo/react-intl/wiki/Components#number-formatting-components): prices, random numbers, ...:
```jsx
```
- otherwise, you're probably looking for a non-component message, **a simple string** you want to be returned:
```jsx
import { injectIntl } from 'react-intl';
// 'intl' will be available among the component's props, after the injection
function HelloWorld({ intl, ...props }) {
const placeholder = intl.formatMessage({
id: 'random.placeholder', // This ID could be anything else as well
});
return ;
}
export default injectIntl(HelloWorld);
```
## What if I'm using Redux
Check the [`react-intl-redux` package](https://www.npmjs.com/package/react-intl-redux).
Easy to add to your app, their documentation/example should be enough.
Hope this helped you.
Most information comes from [@damonbauer's course](https://egghead.io/courses/add-internationalization-i18n-to-a-react-app-using-react-intl).
[Feel free to share your thoughts with me on twitter.](https://twitter.com/eveningkid)