Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

@commercetools-frontend/l10n

16.5.2 • Public • Published

@commercetools-frontend/l10n

Latest release (latest dist-tag) Latest release (next dist-tag) Minified + GZipped size GitHub license

React bindings to load l10n data.

Install

$ npm install --save @commercetools-frontend/l10n

Supported locales

  • en
  • de
  • es
  • fr-FR
  • zh-CN
  • ja

Hooks

import {
  useCountries,
  useCurrencies,
  useLanguages,
  useTimeZones,
} from '@commercetools-frontend/l10n';
 
const { isLoading, data, error } = useCountries('en');

Higher Order Components

import { withCountries } from '@commercetools-frontend/l10n';
 
withCountries(ownProps => ownProps.locale)(Component);
 
// format: { countryCode: countryLabel }
// { "de":"Germany" }
import { withCurrencies } from '@commercetools-frontend/l10n';
 
withCurrencies(ownProps => ownProps.locale)(Component);
 
// format: { currencyCode: { label, symbol } }
// { "EUR": { "label": "Euro", "symbol": "€" } }
import { withLanguages } from '@commercetools-frontend/l10n';
 
withLanguages(ownProps => ownProps.locale)(Component);
 
// format: { languageCode: { language, country? } }
// Case with main language
// { "es": { "language": "Spanish" } }
// Case with language of a region
// { "es-AR": { "language": "Spanish", "country": "Argentina" } }
import { withTimeZones } from '@commercetools-frontend/l10n';
 
withTimeZones(ownProps => ownProps.locale)(Component);
 
// format: { timezone: { name, abbr, offset } }
// Case with main language
// { "es": { "Europe/Berlin": { "name": "Europe/Berlin", "abbr": "CEST", "offset": "+02:00" } } }
// Case with language of a region
// { "fr-FR": { "Europe/Berlin": { "name": "Europe/Berlin", "abbr": "CEST", "offset": "+02:00" } } }
// { "es-AR": { "Europe/Berlin": { "name": "Europe/Berlin", "abbr": "CEST", "offset": "+02:00" } } }

Generating localization data

The data directory contains all the localization data for the supported locales. The data is generated using the script scripts/generate-l10n-data.js, which uses the cldr data.

Using a custom version of the cldr data

In case the npm library cldr does not contain the latest cldr data, we can manually download it and point the cldr library to use that data.

// For example, using the v35 of cldr
const cldr = require('cldr').load(path.join(__dirname, '../cldr-v35'));

First, download the data (core.zip) for a specific version from the downloads page.

Then extract the data and copy the core folder to this package, and rename it to e.g. cldr-v35. Then point the cldr library to the folder location.

Run the script, which uses the new data.

Install

npm i @commercetools-frontend/l10n

DownloadsWeekly Downloads

3,669

Version

16.5.2

License

MIT

Unpacked Size

1.66 MB

Total Files

113

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar