Package Exports

react-translate-maker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-translate-maker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-translate-maker

Universal translation library for React. This library is part of translate-maker. Star this project on GitHub.

Installation

Install via npm.

npm install translate-maker

Features

Build on standards (ICU Message syntax, Unicode CLDR)
Support for 190+ languages
Runs in the browser and Node.js
JSON Structure
Nested and reference translations
Variables
Conditioned translations (Plural, Gender etc...)
Filters capitalize, upperCase, lowerCase etc... and custom filters
Default translations
Integrates with React and Angular
For more details and examples click on translate-maker

Support us

Star this project on GitHub.

Usage

Basic example

import React from 'react';
import Translate { LocaleProvider } from 'react-translate-maker';

const currentLocale = 'en';
const locales = {
  en: {
    hello: 'Hello {$user.name}',
    followers: `{$user.name} has {$user.followers, plural
      zero {no followers}
      one  {# follower}
           {# followers}
    }`
  }
};

const user = {
  name: 'Zlatko',
  followers: 15
};

React.render(
  <LocaleProvider locales={locales} locale={currentLocale}>
    <Translate path="hello" user={user} tagName="h1"/>
    <Translate path="followers" user={user} />
  </LocaleProvider>
);

The result will be

<h1>Hello Zlatko</h1>
<span>Zlatko has 15 followers</span>

Complex example

import React from 'react';
import Translate { LocaleProvider, Gender } from 'react-translate-maker';

const currentLocale = 'en';
const locales = {
  en: {
    gender: `{$gender, select, male {boy} female {girl}}`,
    working: `{gender, $user1.gender as gender | capitalize} {$user1.name} is working with
      {gender, $user2.gender as gender} {$user2.name}`
  }
};

const user1 = {
  gender: Gender.MALE,
  name: 'Zlatko'
};

const user1 = {
  gender: Gender.FEMALE,
  name: 'Livia'
};

React.render(
  <LocaleProvider locales={locales} locale={currentLocale}>
    <Translate path="working" user1={user1} user2={user2} />
  </LocaleProvider>
);

The result will be

<span>Boy Zlatko is working with girl Livia</span>

Custom props for component

You can provide own props. For example className.

import React from 'react';
import Translate { LocaleProvider } from 'react-translate-maker';

const currentLocale = 'en';
const locales = {
  en: {
    welcome: 'Welcome back',
  }
};

const props = {
  className: 'my-class-name'
};

React.render(
  <LocaleProvider locales={locales} locale={currentLocale}>
    <Translate path="welcome" props={props} />
  </LocaleProvider>
);

The result will be

<span class="my-class-name">Welcome back</span>

HTML content

Sometimes you need to provide HTML content.

import React from 'react';
import { LocaleProvider, TranslateHTML } from 'react-translate-maker';

const currentLocale = 'en';
const locales = {
  en: {
    welcome: 'Welcome back <b>{$user.name}</b>. How is it going?',
  }
};

const user = {
  name: 'Zlatko'
};

React.render(
  <LocaleProvider locales={locales} locale={currentLocale}>
    <TranslateHTML path="welcome" user={user} />
  </LocaleProvider>
);

The result will be

<span>Welcome back <b>Zlatko</b>. How is it going?</span>

Filters

Sometimes you need to provide HTML content.

import React from 'react';
import Translate, { LocaleProvider } from 'react-translate-maker';

const currentLocale = 'en';
const locales = {
  en: {
    welcome: 'Welcome {$user.name | star}',
  }
};

const filters = {
  star: function star(value) {
    return '*** ' + value + ' ***';
  }
};

const user = {
  name: 'Zlatko'
};

React.render(
  <LocaleProvider locales={locales} locale={currentLocale} filters={filters}>
    <Translate path="welcome" user={user} />
  </LocaleProvider>
);

The result will be

<span>Welcome *** Zlatko ***</span>

More examples

Please take a look on translate-maker

Running Tests

To run the test suite, first invoke the following command within the repo, installing the development dependencies:

npm install

Then run the tests:

npm test