val-i18n-react
React goodies for val-i18n.
Install
npm add val-i18n-react val-i18n value-enhancer
API
-
I18nProvider
to providei18n
context for descendant components. -
useTranslate
hook to subscribe and get the latesti18n.t
. -
useLang
hook to subscribe and get the latesti18n.lang
. -
useI18n
hook to subscribe and get the latesti18n
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>
);
};
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>
);
};
↓Outputs:
<>
<strong data-t-slot="name">CRIMX</strong> eats <i style={{ color: "red" }} data-t-slot="fruit">apple</i>.
<>
data-t-slot
can be ignored if there is only one placeholder.
<Trans message="a{{b}}c">
<h1>B</h1>
</Trans>
↓Outputs:
<>
a<h1>B</h1>c
</>