# use-intl

> Internationalization (i18n) for React

Latest version **4.14.8** (published 2026-09-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-intl
pnpm add use-intl
yarn add use-intl
bun add use-intl
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.14.8 |
| Published | 2026-09-29 |
| First published | 2020-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 97 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 4372 |
| Author | Jan Amann |
| Maintainers | amann |
| Keywords | react, intl, i18n, internationalization, localization, translate, translation, format, formatting |

## Links

- npm: https://www.npmjs.com/package/use-intl
- Repository: https://github.com/amannn/next-intl
- Homepage: https://next-intl.dev
- Issues: https://github.com/amannn/next-intl/issues
- Funding: https://github.com/sponsors/amannn
- npm.io page: https://npm.io/package/use-intl

## Dependencies (4)

- [icu-minify](https://npm.io/package/icu-minify.md) ^4.14.8
- [intl-messageformat](https://npm.io/package/intl-messageformat.md) ^11.1.0
- [@formatjs/fast-memoize](https://npm.io/package/@formatjs/fast-memoize.md) ^3.1.0
- [@schummar/icu-type-parser](https://npm.io/package/@schummar/icu-type-parser.md) 1.21.5

## Alternatives

- [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads
- [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads
- [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads
- [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads
- [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads

## Recent versions

- 4.14.8 (latest) — 2026-09-29
- 0.0.0-canary-1244f54 (canary) — 2026-10-02
- 4.0.0-beta-dea867b (v4-beta) — 2025-02-24
- 4.0.0-beta-7b755e9 (v4) — 2024-11-19
- 0.0.0-canary-4964697 (prerelease) — 2024-10-16
- 3.6.0-alpha.1 (next) — 2024-02-08
- 2.13.4 (test) — 2023-05-05
- 0.0.0-canary-4932295 — 2026-10-02
- 4.14.7 — 2026-09-24
- 4.14.6 — 2026-09-21
- 0.0.0-canary-c88e873 — 2026-09-21
- 4.14.5 — 2026-09-14
- 4.14.4 — 2026-09-11
- 4.14.3 — 2026-09-10
- 4.14.2 — 2026-09-01
- … 407 more at https://npm.io/package/use-intl/versions

## README

# 🌐 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 (
    <section>
      <h1>{t('title', {firstName: user.firstName})}</h1>
      <p>{t('membership', {memberSince: user.memberSince})}</p>
      <p>{t('followers', {count: user.numFollowers})}</p>
    </section>
  );
}
```

```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 (
    <IntlProvider messages={messages} locale="en">
      <App user={{firstName: 'Jane'}} />
    </IntlProvider>
  );
}

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

Have a look at [the minimal setup example](https://github.com/amannn/next-intl/tree/main/examples/example-use-intl) to explore a working app.

### [→ Read the docs](https://next-intl.dev/docs/environments/core-library)

---
_Source: https://npm.io/package/use-intl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._