Using a Fallback (hook)

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 { data } from './i18n';
import { useI18n } from '../../../src';
const TextFallbackHook = (props) => {
  /*
    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 { i18n } = useI18n(data, { lang: 'zh', fallback: 'es' });
  return (
    <div>
      {i18n.text}
    </div>
  );
};
export { TextFallbackHook as Text };

Take a look at the output.