react-i18n-kit v1.4.0
react-i18n-kit
I18n for your React Components
Table of Contents
Why?
I needed a simple way to translate my react applications without to much overhead.
Installation
$ npm i react-i18n-kit -S
or
$ yarn add react-i18n-kit
Functions
For more detailed information you can take a look at the documentation.
withI18n
This is the enhancer for your Components. If you wrap your Components in this function you get access to a i18n
and a translate
property.
Syntax
Returns a component which renders the wrapped Component
.
const i18n = withI18n(Component, data, options);
Parameters
Parameter | Type | Required | Default | Description |
---|---|---|---|---|
Component | Component | true | The component that gets rendered | |
data | object | true | The translations for your Component | |
options | object | false | The options for your translations |
Component
An example for the Component
parameter.
This component gets access to 2 exposed properties.
Property | Type | Description |
---|---|---|
i18n | object | The committed data object, but only for the corresponding language |
translate | func | The function for the dynamic translation (e.g. on a button click) |
const Text = (props) => (
<div>
<button onClick={() => props.translate('en')}>
English
<button/>
<button onClick={() => props.translate('de')}>
Deutsch
<button/>
{props.i18n.text}
</div>
);
data
An example for the data
parameter.
const data = {
de: {
text: "Hallo Welt!",
},
en: {
text: "Hello World!",
},
};
options
If there is no translation for a language it will take the
fallback
which is default toen
An example for the options
parameter.
const options = {
lang: "de",
fallback: "de",
};
Basic Usage
For more detailed information you can take a look at the documentation
Render a text based on the users browser language. If your browsers language is set to de
it will render Hallo Welt!
and if the browsers language is set to en
it will render Hello World!
.
import React from "react";
import { withI18n } from "react-i18n-kit";
const data = {
de: {
text: "Hallo Welt!",
},
en: {
text: "Hello World!",
},
};
/*
if language is:
- en:
props.i18n.text: "Hello World!"
- de:
props.i18n.text: "Hallo Welt!"
*/
const Text = props => <div>{props.i18n.text}</div>;
const TextI18n = withI18n(Text, data);
export { TextI18n as Text };
As you see you get access to a i18n
property. To make that enhancer work properly we have to pass an object with with keys set to a ISO 639-1 code. Then the enhancer simply passes only the object with the corresponding language to the i18n
property.
For example your browser language is set to en-US
, props.i18n
will be:
{
"text": "Hello World!"
}
You can pass everything you want into these objects, but every language object has to contain the same keys (in this example text
), which you will use in your enhanced component.
Options
If you do not want to deside the language based on the browser language and you want to have a default value you can pass a options object.
If the user is visiting the page with a browser which has its language set to zh
(chinese) it will automatically fallback to en
since there is no translation for zh
right now.
import React from "react";
import { withI18n } from "react-i18n-kit";
const data = {
de: {
text: "Hallo Welt!",
},
en: {
text: "Hello World!",
},
};
const Text = props => <div>{props.i18n.text}</div>;
const TextI18n = withI18n(Text, data, { fallback: "en" });
export { TextI18n as Text };
License
MIT © Lukas Aichbauer