// Integrates Intlayer internationalization with React component. Use when the user asks to "setup React i18n", create a new translated component, use the "useIntlayer" hook, or configure providers.
| name | intlayer-react |
| description | Integrates Intlayer internationalization with React component. Use when the user asks to "setup React i18n", create a new translated component, use the "useIntlayer" hook, or configure providers. |
| metadata | {"author":"Intlayer","url":"https://intlayer.org","license":"Apache-2.0","mcp-server":"@intlayer/mcp","category":"productivity","tags":["i18n","react","vite"],"documentation":"https://intlayer.org/doc","support":"contact@intlayer.org"} |
Intlayer promotes Component-Level Content Declaration. Instead of a massive global translation file, content is declared in *.content.ts files adjacent to the React components that use them.
To create a translated component, you need two files:
myComponent.content.ts) defining the dictionary.MyComponent.tsx) using the useIntlayer hook.Create a content file using t() for translations.
File: src/components/MyComponent/myComponent.content.ts
import { t, type Dictionary } from "intlayer";
const content = {
// The 'key' must be unique and matches what you pass to useIntlayer()
key: "my-component",
content: {
text: t({
en: "Welcome",
fr: "Bienvenue",
es: "Hola",
// ... All other locales set in intlayer config file
}),
},
} satisfies Dictionary;
export default content;
import { useIntlayer } from "react-intlayer";
const MyComponent = () => {
const content = useIntlayer("my-dictionary-key");
return (
<div>
<h1>
{/* Return react node */}
{content.text}
</h1>
{/* Return string (.value) */}
<img src={content.text.value} alt={content.text.value} />
</div>
);
};
Integrates Intlayer internationalization with Angular applications. Use when the user asks to "setup Angular i18n", create a new translated component, use the "useIntlayer" composable, or configure providers.
Integrates Intlayer internationalization with Astro applications. Use when the user asks to "setup Astro i18n", use "getIntlayer" in Astro components, or manage server-side content in Astro.
Define rich content structures using Intlayer content nodes. Use when the user asks to "create translations", "handle pluralization", "use markdown in content", or implement "conditional content".
Integrates Intlayer internationalization with Next.js App Router and Pages Router. Use when the user asks to "setup Next.js i18n", use "useIntlayer" in Server Components, or handle client-side translations in Next.js.
Integrates Intlayer internationalization with Preact applications. Use when the user asks to "setup Preact i18n", create a new translated component, use the "useIntlayer" hook in Preact, or configure providers.
Integrates Intlayer internationalization with SolidJS components. Use when the user asks to "setup SolidJS i18n", create a new translated component, use the "useIntlayer" hook in Solid, or configure providers.