Socket
Socket
Sign inDemoInstall

use-intl

Package Overview
Dependencies
10
Maintainers
1
Versions
166
Alerts
File Explorer

Advanced tools

Install Socket

Protect your apps from supply chain attacks

Install

use-intl

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

    3.9.1latest
    GitHub
    npm

Version published
Maintainers
1
Weekly downloads
189,348
increased by7.7%

Weekly downloads

Changelog

Source

3.9.1 (2024-02-23)

Bug Fixes

  • Return now from global context if no updateInterval has been set on useNow (#881) (dbbefcf)

Readme

Source

🌐 use-intl

Internationalization for React that gets out of your way.

Features

Internationalization is an essential part of the user experience. use-intl gives you everything you need to get language subtleties right and has always got your back whenever you need to fine-tune a translation.

  • 🌟 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?

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

// UserProfile.tsx
import {useTranslations} from 'next-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

  1. npm install use-intl
  2. Add the provider
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.

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.

Keywords

FAQs

Last updated on 23 Feb 2024

Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc