react-intlayer: NPM Package to internationalise (i18n) a React application

Intlayer is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like React, React, and Express.js.

The react-intlayer package allows you to internationalise your React application. It provides context providers and hooks for React internationalisation.

Why Internationalise Your React Application?

Internationalising your React application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.

Why integrate Intlayer?

• JavaScript-Powered Content Management: Harness the flexibility of JavaScript to define and manage your content efficiently.
• Type-Safe Environment: Utilise TypeScript to ensure all your content definitions are precise and free from errors.
• Integrated Content Files: Keep your translations close to their respective components, improving maintainability and clarity.

Installation

Install the necessary package using your preferred package manager:

npm install react-intlayer

Example of usage

With Intlayer, you can declare your content in a structured manner anywhere in your codebase.

By default, Intlayer scans for files with the extension .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}.

You can modify the default extension by setting the contentDir property in the configuration file.

.├── intlayer.config.ts└── src    └── components        ├── Component1        │   ├── index.content.ts        │   └── index.tsx        └── Component2            ├── index.content.ts            └── index.tsx

Declare your content

react-intlayer is designed to work with the intlayer package. intlayer is a package that allows you to declare your content anywhere within your code. It converts multilingual content declarations into structured dictionaries that integrate seamlessly into your application.

Here is an example of content declaration:

import { t, type Dictionary } from "intlayer";const component1Content = {  key: "component-1",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),    numberOfCar: enu({      "<-1": "Less than minus one car",      "-1": "Minus one car",      "0": "No cars",      "1": "One car",      ">5": "Some cars",      ">19": "Many cars",    }),  },} satisfies Dictionary;export default component1Content;

Utilise Content in Your Code

Once you have declared your content, you can use it in your code. Here's an example of how to use the content in a React component:

"use client";import type { FC } from "react";import { useIntlayer } from "react-intlayer";export const Component1Example: FC = () => {  const { myTranslatedContent } = useIntlayer("component-1"); // Create related content declaration  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

Mastering the internationalisation of your React application

Intlayer provides a lot of features to help you internationalise your React application.

To learn more about these features, refer to the React Internationalisation (i18n) with Intlayer and Vite and React guide for Vite and React Application, or the React Internationalisation (i18n) with Intlayer and React (CRA) guide for React Create App.

Functions provided by react-intlayer package

The react-intlayer package also provides some functions to help you to internationalise your application.

• t()
• useIntlayer()
• useDictionary()
• useLocale()

Doc History

• 5.5.10 - 2025-06-29: Initial history