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: 2 months 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 (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-09T10:38:29.000Z (6 months ago)
• Last Synced: 2024-03-26T20:04:11.208Z (3 months ago)
• Topics: i18n, localization, no-dependencies, npm-module, npm-package, react
• Language: TypeScript
• Homepage:
• Size: 1.75 MB
• Stars: 15
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Lists

• awesome-i18n - react-i18n-mini - A tiny (~2.39 kB) internationalisation library for React (📦 Libraries / React / React Native)

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.