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

Intlayer es un conjunto de paquetes diseñados 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 antecedentes 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 seguro para tipos: Utiliza TypeScript para garantizar 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 utilizando tu gestor de paquetes preferido:

npm install react-intlayer

Ejemplo de uso

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

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

Puedes modificar la extensión predeterminada 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 trabajar con el paquete intlayer. intlayer es un paquete que te permite declarar tu contenido en cualquier lugar 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:

// Declaración de contenido para el componente 1import { t, type Dictionary } from "intlayer";const component1Content = {  key: "component-1",  content: {    myTranslatedContent: t({      en: "Hello World",      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";// Ejemplo de uso del contenido declaradoimport type { FC } from "react";import { useIntlayer } from "react-intlayer";export const Component1Example: FC = () => {  const { myTranslatedContent } = useIntlayer("component-1"); // Crear declaración de contenido relacionada  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

Domina la internacionalización de tu aplicación React

Intlayer proporciona muchas características 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 y Vite y React para aplicaciones Vite y React, o la guía Internacionalización (i18n) en React con Intlayer y React (CRA) para aplicaciones creadas con 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()
• useIntlayerAsync()