react-intlayer: Paquete NPM para internacionalizar (i18n) una aplicación React

Intlayer es una suite de paquetes diseñada específicamente para desarrolladores de JavaScript. Es compatible con frameworks como React, React y Express.js.

El paquete react-intlayer te permite internacionalizar tu aplicación React. Proporciona proveedores de contexto y hooks para la internacionalización en React.

¿Por qué internacionalizar tu aplicación React?

Internacionalizar tu aplicación React es esencial para atender eficazmente a una audiencia global. Permite que tu aplicación entregue contenido y mensajes en el idioma preferido de cada usuario. Esta capacidad mejora la experiencia del usuario y amplía el alcance de tu aplicación al hacerla más accesible y relevante para personas de diferentes orígenes lingüísticos.

¿Por qué integrar Intlayer?

• Gestión de contenido impulsada por JavaScript: Aprovecha la flexibilidad de JavaScript para definir y gestionar tu contenido de manera eficiente.
• Entorno con tipado seguro: Aprovecha TypeScript para asegurar que todas tus definiciones de contenido sean precisas y sin errores.
• Archivos de contenido integrados: Mantén tus traducciones cerca de sus respectivos componentes, mejorando la mantenibilidad y claridad.

Instalación

Instala el paquete necesario usando tu gestor de paquetes preferido:

npm install react-intlayer

Ejemplo de uso

Con Intlayer, puedes declarar tu contenido de manera estructurada en cualquier parte de tu base de código.

Por defecto, Intlayer escanea archivos con la extensión .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}.

Puedes modificar la extensión por defecto configurando la propiedad contentDir en el archivo de configuración.

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

Declara tu contenido

react-intlayer está diseñado para funcionar con el paquete intlayer. intlayer es un paquete que te permite declarar tu contenido en cualquier parte de tu código. Convierte las declaraciones de contenido multilingüe en diccionarios estructurados que se integran perfectamente en tu aplicación.

Aquí tienes un ejemplo de declaración de contenido:

import { t, type Dictionary } from "intlayer";const component1Content = {  key: "component-1",  content: {    myTranslatedContent: t({      en: "Hola Mundo",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    numberOfCar: enu({      "<-1": "Menos de menos un coche",      "-1": "Menos un coche",      "0": "Sin coches",      "1": "Un coche",      ">5": "Algunos coches",      ">19": "Muchos coches",    }),  },} satisfies Dictionary;export default component1Content;

Utiliza el contenido en tu código

Una vez que hayas declarado tu contenido, puedes usarlo en tu código. Aquí tienes un ejemplo de cómo usar el contenido en un componente React:

"use client";import type { FC } from "react";import { useIntlayer } from "react-intlayer";export const Component1Example: FC = () => {  const { myTranslatedContent } = useIntlayer("component-1"); // Crear declaración de contenido relacionado  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

Dominando la internacionalización de tu aplicación React

Intlayer ofrece muchas funcionalidades para ayudarte a internacionalizar tu aplicación React.

Para aprender más sobre estas características, consulta la guía Internacionalización (i18n) en React con Intlayer, Vite y React para aplicaciones Vite y React, o la guía Internacionalización (i18n) en React con Intlayer y React (CRA) para React Create App.

Funciones proporcionadas por el paquete react-intlayer

El paquete react-intlayer también proporciona algunas funciones para ayudarte a internacionalizar tu aplicación.

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

Historial de la documentación

• 5.5.10 - 2025-06-29: Historial inicial