Functions

In this section we will get an overview of the functions from this package.

useI18n (hook)

This is the HOOK for your Components. If you use it you will get access to a i18n object and a translate function.

Syntax

Returns an object with the proerties i18n and translate.

const { i18n, translate } = useI18n(data, options);

This component gets access to 2 exposed properties.

Parameters

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 to en An example for the options parameter

const options = {
  lang: "de",
  fallback: "de",
};

withI18n (HOC)

This is the HOC 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

Component

An example for the Component parameter.

const Text = (props) => (
  <div>
    <button onClick={() => props.translate('en')}>
      English
    <button/>
    <button onClick={() => props.translate('de')}>
      Deutsch
    <button/>
    {props.i18n.text}
  </div>
);

This component gets access to 2 exposed properties.

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 to en An example for the options parameter

const options = {
  lang: "de",
  fallback: "de",
};