val-i18n-react

React goodies for val-i18n.

Install

npm add val-i18n-react val-i18n value-enhancer
Copy

API

• I18nProvider to provide i18n context for descendant components.
• useTranslate hook to subscribe and get the latest i18n.t.
• useLang hook to subscribe and get the latest i18n.lang.
• useI18n hook to subscribe and get the latest i18n instance.
• <Trans> component to insert React elements into translation template messages.

Usage

See live example on CodeSandbox.

import { I18n } from "val-i18n";
import { I18nProvider, useTranslate } from "val-i18n-react";

const i18n = new I18n("en", { en: { fruit: "apple" } });

const MyComponent = () => {
  const t = useTranslate();
  return <div>{t("fruit")}</div>;
};

const App = () => {
  return (
    <I18nProvider i18n={i18n}>
      <MyComponent />
    </I18nProvider>
  );
};
Copy

Cascading I18nProvider

You can nest multiple <I18nProvider>s to create cascading i18n contexts.

import { I18n } from "val-i18n";
import { I18nProvider, useTranslate } from "val-i18n-react";

const baseI18n = new I18n("en", { en: { confirm: "Confirm" } });
const loginI18n = new I18n("en", { en: { login: "Login" } });

const MyComponent = () => {
  const t = useTranslate();
  return (
    <div>
      <button>{t("confirm")}</button>
      <button>{t("login")}</button>
    </div>
  );
};

const App = () => {
  return (
    <I18nProvider i18n={baseI18n}>
      <I18nProvider i18n={loginI18n}>
        <MyComponent />
      </I18nProvider>
    </I18nProvider>
  );
};
Copy

Trans Component

To insert React elements into the translation message:

import { Trans, useTranslate } from "val-i18n-react";
import { I18n, I18nProvider } from "val-i18n";

const locales = {
  en: {
    author: "CRIMX",
    fruit: "apple",
    eat: "{{name}} eats {{fruit}}.",
  },
};

const i18n = new I18n("en", locales);

const MyComponent = () => {
  const t = useTranslate();

  return (
    <Trans message={t("eat")}>
      <strong data-t-slot="name">{t("author")}</strong>
      <i style={{ color: "red" }} data-t-slot="fruit">
        {t("fruit")}
      </i>
    </Trans>
  );
};

const App = () => {
  return (
    <I18nProvider i18n={i18n}>
      <MyComponent />
    </I18nProvider>
  );
};
Copy

↓Outputs:

<>
  <strong data-t-slot="name">CRIMX</strong> eats <i style={{ color: "red" }} data-t-slot="fruit">apple</i>.
<>
Copy

data-t-slot can be ignored if there is only one placeholder.

<Trans message="a{{b}}c">
  <h1>B</h1>
</Trans>
Copy

↓Outputs:

<>
  a<h1>B</h1>c
</>
Copy