Intro

I18n for your React Components

Install

$ npm i react-i18n-kit -S

Create the translations for your application.

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

Hook

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

import React from "react";
import { useI18n } from "react-i18n-kit";
import { data } from "./i18n";
const TextHook = () => {
  const { i18n } = useI18n(data);
  return (
    <div>{i18n.text}</div>
  );
};
export { TextHook };

Take a look at the output.

HOC

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

import React from "react";
import { withI18n } from "react-i18n-package";
import { data } from "./i18n";
const TextHoc = props => <div>{props.i18n.text}</div>;
const TextI18n = withI18n(TextHoc, data);
export { TextI18n as TextHoc };

Take a look at the output.