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

Intlayer es un conjunto de paquetes diseñado 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 de React.

¿Por qué internacionalizar tu aplicación React?

El 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: Aprovecha TypeScript para asegurarte de 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 código.

Por defecto, Intlayer escanea 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 permite declarar tu contenido en cualquier lugar de tu código. Convierte declaraciones de contenido multilingües en diccionarios estructurados que integran sin problemas en tu aplicación.

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

import { type DeclarationContent, t } 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 un coche",      "-1": "Menos un coche",      "0": "Sin coches",      "1": "Un coche",      ">5": "Algunos coches",      ">19": "Muchos coches",    }),  },} satisfies DeclarationContent;export default component1Content;

Utiliza el Contenido en tu Código

Una vez que hayas declarado tu contenido, puedes usarlo en tu código. Aquí hay un ejemplo de cómo usar el contenido en un componente de 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 relacionada  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

Dominando 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 de React (i18n) con Intlayer y Vite y React para la aplicación Vite y React, o la guía Internacionalización de React (i18n) con Intlayer y React (CRA) para la aplicación Create React.

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()