react-i18n-mini

A tiny (~2.22 kB) internationalisation library for React.

``bash
npm i react-i18n-mini
`

Usage

#### Displaying Messages

`typescript jsx
import { createI18n, I18nProvider, Text } from 'react-i18n-mini';

const i18n = createI18n({ language: 'en' });

function App() {
return (

message="Read the documentation for more info."
link={(text) => {text}}
/>

)
}
`

#### Plural Formatting

`typescript jsx
message="{count, plural, =0 {No items} one {One item} other {{count} items}}."
count={19999}
/>
`

#### Date Formatting

`typescript jsx
message="Last login {datetime}"
datetime={new Date()}
/>

date={new Date()}
day="numeric"
month="long"
weekday="long"
year="numeric"
/>
`

Note: use {datetime, date} for number or string values.

#### Number Formatting

`typescript jsx
value={9.99}
numberStyle="currency"
currency="EUR"
/>
`

#### useI18n

`typescript jsx
import { useI18n } from 'react-i18n-mini';

function SomeComp() {
const { i18n } = useI18n();

return (


`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)}

`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


Extracting messages

Use react-i18n-mini-parser for extracting default messages.

Polyfills

This library uses Intl APIs (NumberFormat, DateTimeFormat and PluralRules), so you have to use polyfills for some
outdated browsers. https://formatjs.io/docs/polyfills.