Linguistic accessibility. Internationalize your React applications.
Tags: localisation, internationalization, i18n, showdev
Published: 2019-03-25 09:45:21

---
title: Linguistic accessibility. Internationalize your React applications.
published: true
description: 
tags: #localisation #internationalization #i18n #showdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3xjzh07qe5kgo9nue9va.jpg
---

Internationalization is the process of adapting an application to work with different languages and regions.

That can bring some benefits. Your target group can be broader than the one with the default language of the app. So by internationalizing an app, you may reach a bigger audience.

> **Cultural accessibility.** Internationalization it's not only about translation text. Users expect localized Dates, Number separators, Currencies. Even colors can have various meaning across different cultures. While in Western cultures the color green can symbolize environmental friendliness, [in Iran it evokes joy, while in China it symbolizes disgrace](https://blog.amplexor.com/globalcontent/en/localization-strategy-translating-logos-across-cultures). 

### eo-locale

I want to talk you about small, but pretty useful library. It provide you easy way to format numeric, dates and manage your translations. If you don't want read whole article, just see [code](https://github.com/ibitcy/eo-locale).

The first that you need, add library in your project.
`yarn add eo-locale` or `npm i eo-locale --save`

And... that's it, now you can format values.

### Currencies

Many countries that use the same currency have slightly different formats when displaying prices. The days of setting one price in U.S. dollars, pounds or euros and then forcing customers to adapt are long over. `EOLocale.Number` - component for format numeric values. Support for 150+ languages.

```jsx
import { EOLocale } from 'eo-locale';

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

```

### Dates

The legal and cultural expectations for date and time representation vary between countries, and it is important to be aware of the forms of all-numeric calendar dates used in a particular country to know what date is intended. `EOLocale.Date` - component for format date values.

```jsx
import { EOLocale } from 'eo-locale';

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

### Texts

Online shoppers prefer to do business in their native tongue. [42% of Europeans](https://www.transperfect.com/blog/importance-language-global-e-commerce) have reported to only shop online in their native language. [Another report](https://unbabel.com/blog/localization-cant-read-wont-buy/) found that 72% of online shoppers who are not native English speakers would like the product reviews to be available in their native languages.

If you want manage your translations, need little bit more work. Add `EOLocale.Provider` in root of your application. `eo-locale` based on new `React.Context` api.

```jsx
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" /> // Hello World!
  </span>
</EOLocale.Provider>
```

You can pass prop with any name in `EOLocale.Text` component. Pluralization supported also.

```jsx
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
```

If you need do some logic with strings, just import `use Translator` hook.

```jsx
import { useTranslator } from 'eo-locale';

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

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

You can format html values also. More examples on [GitHub page](https://github.com/ibitcy/eo-locale). All of this things based on Internationalization API, which very [good supported](https://caniuse.com/#feat=internationalization) nowadays. Server side rendering supported also. I hope, that this library will help you in your work. Enjoy!