Cómo Funciona la Inserción

En Intlayer, el contenido de inserción se logra a través de la función insertion, que identifica campos de marcador de posición en una cadena (como {{name}} o {{age}}) que pueden ser reemplazados dinámicamente en tiempo de ejecución. Este enfoque te permite crear cadenas flexibles, similares a plantillas, donde partes específicas del contenido son determinadas por los datos proporcionados desde tu aplicación.

Cuando se integra con React Intlayer o Next Intlayer, simplemente puedes proporcionar el objeto de datos que contiene los valores para cada marcador de posición, y Intlayer renderizará automáticamente el contenido con los marcadores de posición reemplazados.

Configuración del Contenido de Inserción

Para configurar el contenido de inserción en tu proyecto Intlayer, crea un módulo de contenido que incluya tus definiciones de inserción. A continuación, se muestran ejemplos en varios formatos.

import { insert, type Dictionary } from "intlayer";const myInsertionContent = {  key: "my_key",  content: {    myInsertion: insert("Hola, mi nombre es {{name}} y tengo {{age}} años!"),  },} satisfies Dictionary;export default myInsertionContent;

Uso del Contenido de Inserción con React Intlayer

Para utilizar el contenido de inserción dentro de un componente React, importa y usa el hook useIntlayer del paquete react-intlayer. Este hook recupera el contenido para la clave especificada y te permite pasar un objeto que mapea cada marcador de posición en tu contenido al valor que deseas mostrar.

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const InsertionComponent: FC = () => {  const { myInsertion } = useIntlayer("my_key");  return (    <div>      <p>        {          /* Salida: "Hola, mi nombre es John y tengo 30 años!" */          myInsertion({ name: "John", age: "30" })        }      </p>      <p>        {          /* Puedes reutilizar la misma inserción con diferentes valores */          myInsertion({ name: "Alice", age: "25" })        }      </p>    </div>  );};export default InsertionComponent;

Recursos Adicionales

Para obtener información más detallada sobre la configuración y el uso, consulta los siguientes recursos:

• Documentación de Intlayer CLI
• Documentación de React Intlayer
• Documentación de Next Intlayer

Estos recursos ofrecen más información sobre la configuración y el uso de Intlayer en diversos entornos y frameworks.