{"library":"react-intl","title":"React Intl","description":"React Intl is a mature and widely-used library for internationalizing React applications. It provides a comprehensive set of components and an API for formatting dates, numbers, and strings, including complex pluralization and translation handling, leveraging JavaScript's built-in `Intl` API. Currently at version 10.1.2, it is part of the broader FormatJS ecosystem, which also includes tools for message extraction and compilation. The library maintains an active development pace, with regular patch and minor releases, and significant major version updates to keep pace with React and JavaScript ecosystem changes. Its key differentiators include a component-based approach for common UI elements, a hook-based API for imperative formatting, and robust support for ICU MessageFormat syntax, making it a powerful choice for globalized React apps.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-intl"],"cli":null},"imports":["import { IntlProvider } from 'react-intl';","import { FormattedMessage } from 'react-intl';","import { useIntl } from 'react-intl';","import { defineMessages } from 'react-intl';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { IntlProvider, FormattedMessage, useIntl } from 'react-intl';\n\n// Define messages for a specific locale\nconst messagesInFrench = {\n  greeting: 'Bonjour {name}, bienvenue sur notre site !',\n  welcome_page_title: 'Page d\\'accueil',\n  current_date: 'Aujourd\\'hui, {ts, date, ::full}',\n  unread_notifications: '{count, plural, one {# notification non lue} other {# notifications non lues}}',\n  product_price: 'Prix : {price, number, currency}',\n};\n\n// Example functional component using FormattedMessage and useIntl hook\nconst HomePage = () => {\n  const intl = useIntl();\n  const userName = 'Jean-Luc';\n  const notificationCount = 3;\n  const productPrice = 42.50;\n\n  return (\n    <div>\n      <h1>{intl.formatMessage({ id: 'welcome_page_title' })}</h1>\n      <p>\n        <FormattedMessage\n          id=\"greeting\"\n          values={{ name: <b>{userName}</b> }}\n        />\n      </p>\n      <p>\n        <FormattedMessage\n          id=\"current_date\"\n          values={{ ts: new Date() }}\n        />\n      </p>\n      <p>\n        <FormattedMessage\n          id=\"unread_notifications\"\n          values={{ count: notificationCount }}\n        />\n      </p>\n      <p>\n        <FormattedMessage\n          id=\"product_price\"\n          values={{ price: productPrice, currency: 'EUR' }}\n        />\n      </p>\n    </div>\n  );\n};\n\n// Root component to provide the IntlProvider context\nconst App = () => (\n  <IntlProvider locale=\"fr-FR\" messages={messagesInFrench}>\n    <HomePage />\n  </IntlProvider>\n);\n\nexport default App;\n","lang":"typescript","description":"This quickstart initializes `react-intl` with a French locale and a set of predefined messages. It demonstrates both the declarative `FormattedMessage` component for rendering localized strings with interpolated values and rich text, and the imperative `useIntl` hook for formatting a title. It showcases date, plural, and currency formatting.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}