Using a Fallback (Hoc)

If a user visits our Component with a language we do not support it will use the fallback language you specify in the options (default: en).

Now we are using a fallback. In this example es.

Create the translations for your application.

// ./i18n/index.js
const data = {
  de: {
    text: "Hallo Welt!",
  },
  en: {
    text: "Hello World!",
  },
  es: {
    text: "!Hola Mundo!",
  },
};
export { data };

Import your data and import the withI18n function from react-i18n-kit and you are ready to go.

Imagine a user from china visits this Component (since we can not force your browser language to be zh we set it as option.lang just for this example, but you would never set options.lang to a language you do not support).

import React from "react";
import { withI18n } from "react-i18n-kit";
import { data } from "./i18n";
const Text = props => <div>{props.i18n.text}</div>;
/*
  Never set a language you do not have a translation for.
  We just use it as example, so you can see the fallback in your browser.
*/
const TextI18n = withI18n(Text, data, {
  lang: "zh",
  fallback: "es",
});
export { TextI18n as Text };

Take a look at the output.

You can set the language and the fallback over the properties of your wrapped component. In the next example we set the fallback to de.