https://github.com/sanichkotikov/react-i18n-mini
A tiny internationalisation for React.
https://github.com/sanichkotikov/react-i18n-mini
i18n localization no-dependencies npm-module npm-package react
Last synced: about 1 month ago
JSON representation
A tiny internationalisation for React.
- Host: GitHub
- URL: https://github.com/sanichkotikov/react-i18n-mini
- Owner: SanichKotikov
- License: mit
- Created: 2021-06-01T14:05:59.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-01-09T10:38:29.000Z (over 1 year ago)
- Last Synced: 2025-03-18T10:51:30.975Z (about 2 months ago)
- Topics: i18n, localization, no-dependencies, npm-module, npm-package, react
- Language: TypeScript
- Homepage:
- Size: 1.75 MB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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 (
{text}}
/>
)
}
```
#### Plural Formatting
```typescript jsx
```
#### Date Formatting
```typescript jsx
```
Note: use `{datetime, date}` for number or string values.
#### Number Formatting
```typescript jsx
```
#### useI18n
```typescript jsx
import { useI18n } from 'react-i18n-mini';
function SomeComp() {
const { i18n } = useI18n();
return (
{i18n.t('Page title')}
{i18n.formatNumber(99999.9, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
{i18n.formatDateTime(new Date(), { day: '2-digit', month: 'short' })}
);
}
```
#### 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 (
)
}
```
```typescript jsx
{i18n.formatNumber(9999, 'fraction')}
```
## Extracting messages
Use [react-i18n-mini-parser](https://www.npmjs.com/package/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.