Autor:
    Creación:2025-02-07Última actualización:2025-06-29

    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.

    Configurar Anidamiento

    Para configurar anidamiento 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:

    firstDictionary.content.ts
    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;

    Configuración de la Anidación

    To use nested content in a React component, leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:

    **/*.tsx
    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>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

    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:

    **/*.tsx
    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:

    Estos recursos proporcionan más información sobre la configuración y el uso de Intlayer en diferentes entornos y con varios frameworks.

    Archivo
    Markdown