Fallback (Missing Data)

In the next example you see that the German (de) translation in the data object does not have text2 key.

// './i18n/index.js'
const data = {
  en: {
    text: "Hello World!",
    text2: "Hello Universe!",
  },
  de: {
    text: "Hallo Welt!",
  },
};
export { data };

If the fallback language has a key that is not available on the current language, we will fill your i18n object with the fallback. So we can savely use the text2 in our Component.

import React from "react";
import { useI18n } from "react-i18n-kit";
import { data } from "./i18n";
const TextHook = () => {
  const { i18n } = useI18n(data, {
    lang: 'de',
    fallback: 'en',
  });
  return (
    <>
      <div>{i18n.text}</div>
      <div>{i18n.text2}</div>
    </>
  );
};
export { TextHook };

Create the translations for your application.