Introductions about react Intl
Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
Here some of use cases
1. Need to import Below Code in your component
import { FormattedMessage } from “react-intl”;
2. For Label Text
<h4 className={`${styles.toolbarTittle}`}>
<FormattedMessage
id=”grid.draft”
defaultMessage=”Draft”
/>
</h4>
3. For Input placeholder
<FormattedMessage id=”app.placeholder” defaultMessage=”search”>
{placeholder => <input type=”text” placeholder={placeholder} />}
</FormattedMessage>
4. Pluralization rules: In some languages you have more than one and other.
<FormattedMessage
id=”grid.welcome”
defaultMessage={`Hello {name}, you have {unreadCount, plural,
=0 {no message}
one {# message}
other {# messages}
}`}
values={{ name: <b>{name}</b>, unreadCount }}>
</FormattedMessage>
Ex Result:
No message
Hello Eric, you have no message
Only one message
Hello Eric, you have 1 message
More than one message
Hello Eric, you have 2 messages
Example repo : https://github.com/kamaldlk/language
