Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
react-intl
Advanced tools
Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
The react-intl package is a comprehensive internationalization library for React that provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
Internationalized messages
Allows you to define messages for translations that can be used throughout your application. The FormattedMessage component displays the message corresponding to the current locale.
{"<FormattedMessage id='greeting' defaultMessage='Hello, World!' />"}
Date and time formatting
Enables you to format dates and times according to the rules of the user's locale. The FormattedDate component automatically formats the date value to a readable string.
{"<FormattedDate value={new Date()} year='numeric' month='long' day='numeric' weekday='long' />"}
Number and currency formatting
Provides components to format numbers and currencies. The FormattedNumber component formats the number as a currency string according to the current locale and specified currency.
{"<FormattedNumber value={1000} style='currency' currency='USD' />"}
Pluralization
Supports plural forms in messages, allowing you to handle singular and plural cases for different languages. The FormattedMessage component is used with a plural format string to correctly display singular or plural text based on the count.
{"<FormattedMessage id='itemCount' defaultMessage='{count, plural, one {# item} other {# items}}' values={{count: itemCount}} />"}
Rich text formatting
Allows for rich text formatting within translations by passing components or HTML elements as values to the FormattedMessage component.
{"<FormattedMessage id='welcome' defaultMessage='Welcome, <b>{name}</b>!' values={{name: <b>John</b>}} tagName='p' />"}
i18next is a powerful internationalization framework for JavaScript, which provides a similar set of features for translating content. It is more flexible than react-intl and can be used with other frameworks besides React.
react-i18next is built on top of i18next and is specifically designed for React applications. It offers a similar feature set to react-intl but with a different API and additional features like namespace support and server-side rendering capabilities.
React-i18nify is a simple translation and localization library for React and React Native, offering a simpler API and smaller bundle size compared to react-intl. It lacks some of the advanced formatting options provided by react-intl.
Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
React Intl is part of FormatJS. It provides bindings to React via its components and API.
React Intl's docs are in this GitHub repo's Wiki, Get Started. There are also several runnable example apps which you can reference to learn how all the pieces fit together.
(If you're looking for React Intl v1, you can find it here.)
There are several runnable examples in this Git repo, but here's a Hello World one:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {IntlProvider, FormattedMessage} from 'react-intl';
class App extends Component {
constructor(props) {
super(props);
this.state = {
name : 'Eric',
unreadCount: 1000,
};
}
render() {
const {name, unreadCount} = this.state;
return (
<p>
<FormattedMessage
id="welcome"
defaultMessage={`Hello {name}, you have {unreadCount, number} {unreadCount, plural,
one {message}
other {messages}
}`}
values={{name: <b>{name}</b>, unreadCount}}
/>
</p>
);
}
}
ReactDOM.render(
<IntlProvider locale="en">
<App />
</IntlProvider>,
document.getElementById('container')
);
This example would render: "Hello Eric, you have 1,000 messages." into the container element on the page.
Pluralization rules: In some languages you have more than one
and other
. For example in ru
there are the following plural rules: one
, few
, many
and other
.
Check out the official Unicode CLDR documentation.
Let's make React Intl and FormatJS better! If you're interested in helping, all contributions are welcome and appreciated. React Intl is just one of many packages that make up the FormatJS suite of packages, and you can contribute to any/all of them, including the Format JS website itself.
Check out the Contributing document for the details. Thanks!
This software is free to use under the Yahoo Inc. BSD license. See the LICENSE file for license text and copyright information.
FAQs
Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
The npm package react-intl receives a total of 759,341 weekly downloads. As such, react-intl popularity was classified as popular.
We found that react-intl demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.