Build Status
npm version
npm downloads

  • 💪Runs in all browsers and Node.js
  • 📦Tiny(2kb). Calculated by size-limit
  • 📚Supports ICU format
  • 🎓Based on Internationalization API and React Hooks
  • 👫Familiar react-intl API & patterns

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

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']);
Load More Related Articles
Load More By john
Load More In Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *