val-i18n-react



React goodies for val-i18n.

Install

``bash
npm add val-i18n-react val-i18n value-enhancer
`

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.
- component to insert React elements into translation template messages.

Usage

See live example on CodeSandbox.

`jsx
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

;
};

const App = () => {
return (



);
};
`

$3

You can nest multiple s to create cascading i18n contexts.

`tsx
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 (


);
};

const App = () => {
return (





);
};
`

$3

To insert React elements into the translation message:

`jsx
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 (

{t("author")}

{t("fruit")}


);
};

const App = () => {
return (



);
};
`

↓Outputs:

`jsx
<>
CRIMX eats apple.
<>
`

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

`jsx



B



`

↓Outputs:

`jsx
<>
a

B

c

``