react-hola

simple react language translation

Quick Start

npm install -save react-hola

Basic Usage

import React from 'react';
import { InternationalProvider, WithTranslation } from 'react-hola';

//define language
const languagesData = {
  "en-US": {
    "main": {
      "title": "hello world",
      "greet": "hello {{ name }}"
    }
  }
}

//define a custom component
const helloWorld = props => (
  <div>
    <h2>{ props.langs.title }</h2>
    <p>{ props.langs.greet({ name: 'charlie'})}</p>
  </div>
)

//generate new component with HOC
const HelloWorld = WithTranslation(helloWorld, 'main')

//will output hello world and hello charlie
const App = () => (
  <InternationalProvider data={languagesData} locale="en-US">
    <HelloWorld />
  </InternationalProvider>
);

Component level translations

import React from 'react';
import { InternationalProvider, WithTranslation } from 'react-hola';

//define language
const languagesData = {
  "en-US": {
    "main": {
      "helloWorld": {
        "title": "hello world",
        "greet": "hello {{ name }}"
      }
    }
  }
}

//define a custom component
const helloWorld = props => (
  <div>
    <h2>{ props.langs.title }</h2>
    <p>{ props.langs.greet({ name: 'charlie'})}</p>
  </div>
)

//access component translation using dot notation
const HelloWorld = WithTranslation(helloWorld, 'main.helloWorld')

//will output hello world and hello charlie
const App = () => (
  <InternationalProvider data={languagesData} locale="en-US">
    <HelloWorld />
  </InternationalProvider>
);

Share translation among component

import React from 'react';
import { InternationalProvider, WithTranslation } from 'react-hola';

//define language
const languagesData = {
  "en-US": {
    "share": {
      "UI": {
        "title": "hello world"
      }
    }
    "main": {
      "helloWorld": {
        "greet": "hello {{ name }}"
      }
    }
  }
}

//define a custom component
const helloWorld = props => (
  <div>
    <h2>{ props.langs.title }</h2>
    <p>{ props.langs.greet({ name: 'charlie'})}</p>
  </div>
)

//access multiple component translation
const HelloWorld = WithTranslation(helloWorld, ['main.helloWorld', 'share,UI'])

//will output hello world and hello charlie
const App = () => (
  <InternationalProvider data={languagesData} locale="en-US">
    <HelloWorld />
  </InternationalProvider>
);