Use-intl NPM | npm.io

🌐 use-intl

Internationalization 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?

// UserProfile.tsx
import {useTranslations} from 'use-intl';
 
export default function UserProfile({user}) {
  const t = useTranslations('UserProfile');
 
  return (
    <section>
      <h1>{t('title', {firstName: user.firstName})}</h1>
      <p>{t('membership', {memberSince: user.memberSince})}</p>
      <p>{t('followers', {count: user.numFollowers})}</p>
    </section>
  );
}

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

Installation

npm install use-intl
Add the provider
Use internationalization in components

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 {username}!'
  }
};

function Root() {
  return (
    <IntlProvider messages={messages} locale="en">
      <App user={{name: 'Jane'}} />
    </IntlProvider>
  );
}

function App({user}) {
  const t = useTranslations('App');
  return <h1>{t('hello', {username: user.name})}</h1>;
}

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

→ Read the docs

react intl i18n internationalization localization translate translation format formatting

@formatjs/fast-memoize intl-messageformat

@infinitebrahmanuniverse/nolb-use-i @everything-registry/sub-chunk-3026 @aidc/components @agurtovoy/next-intl @flatbiz/antd @hyperse/pro-layout @hyperse/utils @hyperse/antd next-intl next-intl-en next-intl-masta next-intl-app next-intl-colenso-beta @wukla/react @xircus-web3/composer @xircus-web3/skinner @xw3/maki alexd-next-intl droppii-b2b

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

9 months ago

0.0.0-canary-5bbd7ad56b530e283b07cff950de61d6af81f00c

9 months ago

10 months ago

9 months ago

10 months ago

9 months ago

0.0.0-canary-e0b74da3ea9d55d9656fc32c52c6b740383f47de

9 months ago

0.0.0-canary-91f2bb95294708297d0d88248e09b1c0dc454c79

9 months ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-package-boundaries.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-package-boundaries-1

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2.11.0-useFormatter-alpha.1

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

4 years ago

3 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago