All Projects → sealninja → React I18nify

sealninja / React I18nify

Licence: mit
Simple i18n translation and localization components and helpers for React.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React I18nify

Eo Locale
🌏Internationalize js apps 👔Elegant lightweight library based on Internationalization API
Stars: ✭ 290 (+135.77%)
Mutual labels:  translation, i18n, localization
Fluent.js
JavaScript implementation of Project Fluent
Stars: ✭ 622 (+405.69%)
Mutual labels:  translation, i18n, localization
Js Lingui
🌍📖 A readable, automated, and optimized (5 kb) internationalization for JavaScript
Stars: ✭ 3,249 (+2541.46%)
Mutual labels:  translation, i18n, localization
labels
Bolt Labels extension - Translatable labels for Bolt
Stars: ✭ 18 (-85.37%)
Mutual labels:  i18n, translation, localization
Parrot
Self-hosted Localization Management Platform built with Go and Angular
Stars: ✭ 967 (+686.18%)
Mutual labels:  translation, i18n, localization
Mojito
An automation platform that enables continuous localization.
Stars: ✭ 256 (+108.13%)
Mutual labels:  translation, i18n, localization
Easy localization
Easy and Fast internationalizing your Flutter Apps
Stars: ✭ 407 (+230.89%)
Mutual labels:  translation, i18n, localization
rosetta
A blazing fast internationalization (i18n) library for Crystal with compile-time key lookup.
Stars: ✭ 23 (-81.3%)
Mutual labels:  i18n, translation, localization
Phabricator zh hans
Phabricator zh-Hans Translation & Tools.
Stars: ✭ 113 (-8.13%)
Mutual labels:  translation, i18n, localization
Frenchkiss.js
The blazing fast lightweight internationalization (i18n) module for javascript
Stars: ✭ 776 (+530.89%)
Mutual labels:  translation, i18n, localization
Traduora
Ever® Traduora - Open-Source Translation Management Platform
Stars: ✭ 1,580 (+1184.55%)
Mutual labels:  translation, localization, i18n
React Intl Hooks
React hooks for internationalization without the hassle ⚛️🌍
Stars: ✭ 64 (-47.97%)
Mutual labels:  translation, i18n, localization
i18n-tag-schema
Generates a json schema for all i18n tagged template literals in your project
Stars: ✭ 15 (-87.8%)
Mutual labels:  i18n, translation, localization
Tower
i18n & L10n library for Clojure/Script
Stars: ✭ 264 (+114.63%)
Mutual labels:  translation, i18n, localization
plate
Internationalization library for Python
Stars: ✭ 31 (-74.8%)
Mutual labels:  i18n, translation, localization
React Localize Redux
Dead simple localization for your React components
Stars: ✭ 384 (+212.2%)
Mutual labels:  translation, i18n, localization
inlang
Open Source Localization Solution for Software.
Stars: ✭ 160 (+30.08%)
Mutual labels:  i18n, translation, localization
translation
👅 Translations (symfony/translation) to Nette Framework (@nette)
Stars: ✭ 55 (-55.28%)
Mutual labels:  i18n, translation, localization
Mobility
Pluggable Ruby translation framework
Stars: ✭ 644 (+423.58%)
Mutual labels:  translation, i18n, localization
Atom I18n
:atom: One Atom i18n Package for Any Locale 🌏 🌎 🌍
Stars: ✭ 56 (-54.47%)
Mutual labels:  translation, i18n, localization

React I18nify

Note: Looking for the v1 documentation? See v1 branch.

Simple i18n translation and localization components and helpers for React.

NPM version Downloads Dependency Status

A working example of this package can be found here at RunKit.

Installation

Install by using npm:

npm i react-i18nify

Getting started

Start by setting the translations and locale to be used:

import { setTranslations, setLocale } from 'react-i18nify';

setTranslations({
  en: {
    application: {
      title: 'Awesome app with i18n!',
      hello: 'Hello, %{name}!'
    },
    date: {
      long: 'MMMM do, yyyy'
    },
    export: 'Export %{count} items',
    export_0: 'Nothing to export',
    export_1: 'Export %{count} item',
    two_lines: <div>Line 1<br />Line 2<div>
  },
  nl: {
    application: {
      title: 'Toffe app met i18n!',
      hello: 'Hallo, %{name}!'
    },
    date: {
      long: 'd MMMM yyyy'
    },
    export: 'Exporteer %{count} dingen',
    export_0: 'Niks te exporteren',
    export_1: 'Exporteer %{count} ding',
    two_lines: <div>Regel 1<br />Regel 2</div>
  }
});

setLocale('nl');

Now you're all set up to unleash the power of react-i18nify!

Components

The easiest way to translate or localize in your React application is by using the Translate and Localize components:

import { Translate, Localize } from 'react-i18nify';

<Translate value="application.title" />
  // => Toffe app met i18n!
<Translate value="application.hello" name="Aad" />
  // => Hallo, Aad!
<Translate value="export" count={1} />
  // => Exporteer 1 ding
<Translate value="export" count={2} />
  // => Exporteer 2 dingen
<Translate value="two_lines" />
  // => <div>Regel 1<br />Regel 2</div>

<Localize value="07-2016-04" dateFormat="date.long" parseFormat="dd-yyyy-MM" />
  // => 7 april 2016
<Localize value="2015-09-03" dateFormat="date.long" />
  // => 3 september 2015
<Localize value={10/3} options={{style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2}} />
  // => € 3,33

Helpers

If for some reason, you cannot use the components, you can use the translate and localize helpers instead:

import { translate, localize } from 'react-i18nify';

translate('application.title');
  // => Toffe app met i18n!
translate('application.hello', {name: 'Aad'});
  // => Hallo, Aad!'
translate('export', {count: 0});
  // => Niks te exporteren
translate('application.unknown_translation');
  // => unknown_translation
translate('application', {name: 'Aad'});
  // => {hello: 'Hallo, Aad!', title: 'Toffe app met i18n!'}

localize(1385856000000, { dateFormat: 'date.long' });
  // => 1 december 2013
localize(Math.PI, { maximumFractionDigits: 2 });
  // => 3,14

If you want these helpers to be re-rendered automatically when the locale or translations change, you have to wrap them in a <I18n> component using its render prop:

import { I18n, translate } from 'react-i18nify';

<I18n render={() => <input placeholder={translate("application.title")} />} />

Date localization

react-i18nify uses date-fns internally to handle date localization. In order to reduce the base bundle size, date-fns locale objects needed for date localization are not included by default. If you need date localization, you can add them manually using addLocale or addLocales. For a list of available locales, refer to the date-fns list.

import { addLocale, addLocales, setLocale } from 'react-i18nify';
import en from 'date-fns/locale/en-US';
import nl from 'date-fns/locale/nl';
import it from 'date-fns/locale/it';

// Add a single locale
addLocale('nl', nl);
setLocale('nl');

// Add multiple locales
addLocales({ nl, it, en });
setLocale('it');

API Reference

<Translate>

React translate component, with the following props:

  • value (string)

The translation key to translate.

  • Other props

All other provided props will be used as replacements for the translation.

<Localize>

React localize component, with the following props:

  • value (number|string|object)

The number or date to localize.

  • dateFormat (string)

The translation key for providing the format string. Only needed for localizing dates. For the full list of formatting tokens which can be used in the format string, see the date-fns documentation.

  • parseFormat (string)

An optional formatting string for parsing the value when localizing dates. For the full list of formatting tokens which can be used in the parsing string, see the date-fns documentation.

  • options (object)

When localizing numbers, the localize component supports all options as provided by the Javascript built-in Intl.NumberFormat object. For the full list of options, see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat.

<I18n>

React I18n wrapper component, with the following prop:

  • render (func)

The return value of the provide function will be rendered and automatically re-render when the locale or translations change.

addLocale(name, locale)

Add a date-fns locale to the available locales for date localization.

import { addLocale, setLocale } from 'react-i18nify';
import nl from 'date-fns/locale/nl';

addLocale('nl', nl);
setLocale('nl');

addLocales(localesObject)

Add multiple date-fns locales to the available locales for date localization at once.

import { addLocales, setLocale } from 'react-i18nify';
import nl from 'date-fns/locale/nl';
import it from 'date-fns/locale/it';

addLocales({ nl, it });
setLocale('it');

setLocale(locale, rerenderComponents = true)

The used locale can be set with this function. By default, changing the locale will re-render all components. This behavior can be prevented by providing false as a second argument.

getLocale()

Get the currently used locale.

setTranslations(translations, rerenderComponents = true)

The used translations can be set with this function. By default, changing the translations will re-render all components. This behavior can be prevented by providing false as a second argument.

getTranslations()

Get the currently used translations.

setLocaleGetter(fn)

Alternatively to using setLocale, you can provide a callback to return the locale with setLocaleGetter:

import { setLocaleGetter } from 'react-i18nify';

const localeFunction = () => 'nl';

setLocaleGetter(localeFunction);

setTranslationsGetter(fn)

Alternatively to using setTranslations, you can provide a callback to return the translations with setTranslationsGetter:

import { setTranslationsGetter } from 'react-i18nify';

const translationsFunction = () => ({
  en: { ... },
  nl: { ... }
});

setTranslationsGetter(translationsFunction);

setHandleMissingTranslation(fn)

By default, when a translation is missing, the translation key will be returned in a slightly formatted way, as can be seen in the translate('application.unknown_translation'); example above. You can however overwrite this behavior by setting a function to handle missing translations.

import { setHandleMissingTranslation, translate } from 'react-i18nify';

setHandleMissingTranslation((key, replacements) => `Missing translation: ${key}`);

translate('application.unknown_translation');
  // => Missing translation: application.unknown_translation

translate(key, replacements = {})

Helper function to translate a key, given an optional set of replacements. See the above Helpers section for examples.

localize(value, options)

Helper function to localize a value, given a set of options. See the above Helpers section for examples.

For localizing dates, the date-fns library is used. A dateFormat option can be used for providing a translation key with the format string. For the full list of formatting tokens which can be used in the format string, see the date-fns documentation. Moreover, parseFormat option can be used for providing a formatting string for parsing the value. For the full list of formatting tokens which can be used in the parsing string, see the date-fns documentation.

For number formatting, the localize helper supports all options as provided by the Javascript built-in Intl.NumberFormat object. For the full list of options, see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat.

t(key, replacements = {})

Alias for translate.

l(value, options)

Alias for localize.

forceComponentsUpdate()

This function can be called to force a re-render of all I18n components.

Example application with SSR

An example application with server-side rendering using features of react-i18nify can be found at https://github.com/sealninja/react-ssr-example.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].