Contenido de Inserción / Inserción en Intlayer

Cómo Funciona la Inserción

En Intlayer, el contenido de inserción se logra mediante 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 se determinan 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 reemplazados.

Configuración del Contenido de Inserción

Para configurar 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 de contenido de inserción con React Intlayer

Para utilizar contenido de inserción dentro de un componente React, importe y use el hook useIntlayer del paquete react-intlayer. Este hook recupera el contenido para la clave especificada y le permite pasar un objeto que asigna cada marcador de posición en su contenido al valor que desea 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>        {          /* Puede reutilizar la misma inserción con valores diferentes */          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, consulte los siguientes recursos:

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

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

Historial del Documento

• 5.5.10 - 2025-06-29: Historial inicial