Internationalize your React applications

eo-locale

• :muscle: Runs in all browsers and Node.js
• :package: Tiny(2kb). Calculated by size-limit
• :books: Supports ICU format
• :mortar_board: Based on Internationalization API and React Hooks
• :couple: Familiar react-intl API & patterns

How to install

npm i eo-locale --save or yarn add eo-locale

Examples

English language by default

Format number

import { EOLocale } from 'eo-locale';

<EOLocale.Number value={1000} />
// 1,000

<EOLocale.Number
  value={1000}
  currency="EUR"
  maximumFractionDigits={2}
  minimumFractionDigits={2}
  style="currency"
/>
// €1,000.00

Format messages

Add provider in root of your application

import { EOLocale } from 'eo-locale';

const locales = [
  {
    language: 'en',
    messages: {
      hello: 'Hello {name}!'
    }
  },
];

<EOLocale.Provider language="en" locales={locales}>
  <span>
    <EOLocale.Text id="hello" name="World" /> // Helo World!
  </span>
</EOLocale.Provider>

Format html

Just set html prop to true

import { EOLocale } from 'eo-locale';

const locales = [
  {
    language: 'en',
    messages: {
      hello: 'Hello<br/>World!'
    }
  },
];

<EOLocale.Text html id="hello" />
// Hello
// World!

Format date

import { EOLocale } from 'eo-locale';

<EOLocale.Date value={new Date(2019, 2, 19)} />
// 3/19/2019

<EOLocale.Date
  value={new Date(2019, 2, 19)}
  day="numeric"
  month="long"
  year="numeric"
  weekday="long"
 />
 // Tuesday, March 19, 2019

Use without react

import { Translator } from 'eo-locale';

const locales = [
  {
    language: 'en',
    messages: {
      today: 'Today is {weekday}!'
    }
  },
];

const translator = new Translator({
  language: 'en',
  locales,
});
// translator.formatDate
// translator.formatNumber
// translator.translate

Use components as props

import { EOLocale } from 'eo-locale';

const locales = [
  {
    language: 'en',
    messages: {
      today: 'Today is {weekday}!'
    }
  },
];

<EOLocale.Text
  id="today"
  weekday={<EOLocale.Date value={new Date(2019, 2, 19)} weekday="long" />}
/>
// Today is Tuesday!

Hook useTranslator

import { useTranslator } from 'eo-locale';

function SomeComponent() {
  const translator = useTranslator();

  return <div>{translator.formatNumber(1000)}</div>;
}

Plural

Based on Intl.PluralRules. Works fine for any language.

import { EOLocale } from 'eo-locale';

const locales = [
  {
    language: 'en',
    messages: {
      items: '{count, plural, one {One item} other {{count} items}}'
    }
  },
];

<EOLocale.Text id="items" count={3} />
// 3 items

Client polyfill

import { clientPolyfill } from 'eo-locale/dist/polyfill';

clientPolyfill().then(() => {
  // Init your application
});

Server polyfill

import { serverPolyfill } from 'eo-locale/dist/polyfill';

serverPolyfill(['en']);