Package Exports

use-intl

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-intl) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

use-intl 🌐

Gzipped size Tree shaking supported Build passing

Minimal, but complete solution for managing internationalization in React apps.

Features

🌟 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. Messages use the proven ICU syntax which covers interpolation, numbers, dates, times, plurals, ordinal pluralization, label selection based on enums and rich text.
⚔️ Based on battle-tested building blocks from Format.JS (used by react-intl), this library is a thin wrapper around high-quality, lower-level APIs for i18n.
💡 A hooks-only API ensures that you can use the same API for children as well as for attributes which expect strings.

What does it look like?

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

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

Install use-intl in your project
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'
  }
};

ReactDOM.render(
  <IntlProvider messages={messages} locale="en">
    <App />
  </IntlProvider>
)

Based on the features you need and the browsers you support, you might have to provide polyfills.
Use translations in your components!

Usage

Please refer to the docs of next-intl.