Anidación / Referencia de Subcontenido

Cómo Funciona la Anidación

En Intlayer, la anidación se logra a través de la función nest, que 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 para anidar en otro diccionario:

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;

Referenciando con Nest

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

import { nest, type Dictionary } from "intlayer";

const myNestingContent = {
  key: "key_of_my_second_dictionary",
  content: {
    // Referencia el diccionario completo:
    fullNestedContent: nest("key_of_my_first_dictionary"),
    // Referencia un valor específico anidado:
    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 el contenido completo del diccionario referenciado.

Usando Anidación con React Intlayer

Para usar contenido anidado en un componente de React, utiliza el hook useIntlayer del paquete react-intlayer. Este hook recupera el contenido correcto basado en la clave especificada. Aquí tienes 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 información sobre la configuración y el uso de Intlayer en diferentes entornos y con varios frameworks.