🌐 use-intl

> Internationalization (i18n) for React

Features

Internationalization (i18n) is an essential part of the user experience, therefore use-intl gives you all the parts you need to get language nuances right.

- 🌟 ICU message syntax: Localize your messages with interpolation, cardinal & ordinal plurals, enum-based label selection and rich text.
- 📅 Dates, times & numbers: Apply appropriate formatting without worrying about server/client differences like time zones.
- ✅ Type-safe: Speed up development with autocompletion for message keys and catch typos early with compile-time checks.
- 💡 Hooks-based API: Learn a single API that can be used across your code base to turn translations into plain strings or rich text.
- 🛠️ Standards-based: Use the best parts of built-in JavaScript APIs and supplemental lower-level APIs from Format.JS.

What does it look like?

``jsx
// UserProfile.tsx
import {useTranslations} from 'use-intl';

export default function UserProfile({user}) {
const t = useTranslations('UserProfile');

return (


{t('title', {firstName: user.firstName})}

{t('membership', {memberSince: user.memberSince})}

{t('followers', {count: user.numFollowers})}


);
}
`

`js
// en.json
{
"UserProfile": {
"title": "{firstName}'s profile",
"membership": "Member since {memberSince, date, short}",
"followers": "{count, plural, ↵
=0 {No followers yet} ↵
=1 {One follower} ↵
other {# followers} ↵
}"
}
}
`

Installation

1. npm install use-intl
2. Add the provider
3. Use internationalization in components

`jsx
import {IntlProvider, useTranslations} from 'use-intl';

// You can get the messages from anywhere you like. You can also
// fetch them from within a component and then render the provider
// along with your app once you have the messages.
const messages = {
App: {
hello: 'Hello {firstName}!'
}
};

function Root() {
return (



);
}

function App({user}) {
const t = useTranslations('App');
return

{t('hello', {firstName: user.firstName})}

;
}
``

Have a look at the minimal setup example to explore a working app.

$3