Anidación / Referenciación de Sub Contenido

Cómo Funciona la Anidación

En Intlayer, la anidación se logra a través de la función nest, que te permite referenciar y reutilizar contenido de otro diccionario. En lugar de duplicar contenido, puedes apuntar a un módulo de contenido existente mediante su clave.

Configuración de la Anidación

Para configurar la anidación en tu proyecto de Intlayer, primero defines el contenido base que deseas reutilizar. Luego, en un módulo de contenido separado, utilizas la función nest para importar ese contenido.

Diccionario Base

A continuación, se muestra un ejemplo de un diccionario base con contenido anidado:

import { type Dictionary } from "intlayer";const firstDictionary = {  key: "key_of_my_first_dictionary",  content: {    content: "content",    subContent: {      contentNumber: 0,      contentString: "string",    },  },} satisfies Dictionary;export default firstDictionary;

Referenciación con Nest

Ahora, crea otro módulo de contenido que utilice la función nest para referenciar el contenido anterior. Puedes referenciar todo el contenido o un valor específico anidado:

import { nest, type Dictionary } from "intlayer";const myNestingContent = {  key: "key_of_my_second_dictionary",  content: {    // Referencia todo el diccionario:    fullNestedContent: nest("key_of_my_first_dictionary"),    // Referencia un valor anidado específico:    partialNestedContent: nest(      "key_of_my_first_dictionary",      "subContent.contentNumber"    ),  },} satisfies Dictionary;export default myNestingContent;

Como segundo parámetro, puedes especificar una ruta a un valor anidado dentro de ese contenido. Cuando no se proporciona una ruta, se devuelve todo el contenido del diccionario referenciado.

Usando la Anidación con React Intlayer

Para usar contenido anidado en un componente React, aprovecha el hook useIntlayer del paquete react-intlayer. Este hook recupera el contenido correcto según la clave especificada. Aquí hay un ejemplo de cómo usarlo:

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const NestComponent: FC = () => {  const { fullNestedContent, partialNestedContent } = useIntlayer(    "key_of_my_second_dictionary"  );  return (    <div>      <p>        Contenido Anidado Completo: {JSON.stringify(fullNestedContent)}        {/* Salida: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}      </p>      <p>        Valor Anidado Parcial: {partialNestedContent}        {/* Salida: 0 */}      </p>    </div>  );};export default NestComponent;

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 proporcionan más detalles sobre la configuración y el uso de Intlayer en diferentes entornos y con varios frameworks.