Linguistic accessibility. Internationalize your React applications.

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.

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.

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.

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.

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 have reported to only shop online in their native language. Another report 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.

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.

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.

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. All of this things based on Internationalization API, which very good supported nowadays. Server side rendering supported also. I hope, that this library will help you in your work. Enjoy!

Comments

[CSOFT International]

Thank you for sharing the importance of internationalization for apps! In today's increasingly digital world, being able to adapt an application to effectively target an audience is crucial for product and business success. Software localization can be tricky work, and for larger projects it can be helpful to partner with organizations that have extensive experience in project managing. Check out some of the benefits here: csoftintl.com/localization/softwar...