use-intl

🌐 use-intl

A minimal, but complete solution for managing translations, date, time and number formatting in React apps.

Features

• 🌟 Proven ICU syntax: This covers interpolation, plurals, ordinal pluralization, label selection based on enums and rich text. I18n is an essential part of the user experience, therefore this library doesn't compromise on flexibility and never leaves you behind when you need to fine tune a translation.
• 📅 Built-in date, time and number formatting: You can use global formats for a consistent look & feel of your app and integrate them with translations.
• 💡 Hooks-only API: This ensures that you can use the same API for children as well as for attributes which expect strings.
• ✅ Type-safe: If you're using TypeScript, you'll benefit from autocompletion for available message keys and compile-time errors for typos.
• ⚔️ Battle-tested building blocks: This library is a minimal wrapper around built-in browser APIs and supplemental lower-level APIs from Format.JS (used by react-intl).

What does it look like?

This library is based on the premise that messages can be grouped by namespaces (typically a component name).

// LatestFollower.js
import {useTranslations} from 'use-intl';

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

  return (
    <>
      <Text>{t('latestFollower', {username: user.name})}</Text>
      <IconButton aria-label={t('followBack')} icon={<FollowIcon />} />
    </>
  );
}

// en.json
{
  "LatestFollower": {
    "latestFollower": "{username} started following you",
    "followBack": "Follow back"
  }
}

Installation

• npm install use-intl
• Add the provider

import {IntlProvider} 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.

Usage

Please refer to the next-intl usage docs for more advanced usage, but note that you should import from use-intl instead of next-intl.