Internationalisation for React
npm install react-i18n-miniA tiny (~2.22 kB) internationalisation library for React.
``bash`
npm i react-i18n-mini
#### Displaying Messages
`typescript jsx
import { createI18n, I18nProvider, Text } from 'react-i18n-mini';
const i18n = createI18n({ language: 'en' });
function App() {
return (
link={(text) => {text}}
/>
)
}
`
#### Plural Formatting
`typescript jsx`
count={19999}
/>
#### Date Formatting
`typescript jsx
datetime={new Date()}
/>
day="numeric"
month="long"
weekday="long"
year="numeric"
/>
`
Note: use {datetime, date} for number or string values.
#### Number Formatting
`typescript jsx`
numberStyle="currency"
currency="EUR"
/>
#### useI18n
`typescript jsx
import { useI18n } from 'react-i18n-mini';
function SomeComp() {
const { i18n } = useI18n();
return (
#### Define Messages
`typescript jsx
import { useI18n, defineMessages } from 'react-i18n-mini';const messages = defineMessages({
title: { message: 'Page title' },
});
function SomeComp() {
const { i18n } = useI18n();
return
{i18n.t(messages.title)}
;
}
`#### Using Presets
`typescript jsx
import { createI18n, I18nProvider, Text } from 'react-i18n-mini';const i18n = createI18n({
language: 'en',
presets: {
number: {
default: { minimumFractionDigits: 0, maximumFractionDigits: 0 },
fraction: { minimumFractionDigits: 2, maximumFractionDigits: 2 },
},
dateTime: {
default: { day: 'numeric', month: 'short', year: 'numeric' },
full: { day: 'numeric', month: 'long', year: 'numeric' },
simple: { day: 'numeric', month: 'short' },
},
},
});
function App() {
return (
message="Some value: {count, number, fraction}"
count={999}
/>
)
}
``typescript jsx
{i18n.formatNumber(9999, 'fraction')}
``Use react-i18n-mini-parser for extracting default messages.
This library uses Intl APIs (NumberFormat, DateTimeFormat and PluralRules), so you have to use polyfills for some
outdated browsers. https://formatjs.io/docs/polyfills.