Autor:
    Criação:2025-02-07Última atualização:2025-06-29

    Aninhamento / Referência de Subconteúdo

    Como Funciona o Aninhamento

    No Intlayer, o aninhamento é realizado através da função nest, que permite referenciar e reutilizar conteúdo de outro dicionário. Em vez de duplicar conteúdo, você pode apontar para um módulo de conteúdo existente usando sua chave.

    Configurando Nesting

    Para configurar nesting no seu projeto Intlayer, você primeiro define o conteúdo base que deseja reutilizar. Depois, em um módulo de conteúdo separado, você usa a função nest para importar esse conteúdo.

    Dicionário Base

    Abaixo está um exemplo de um dicionário base para aninhar em outro dicionário:

    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;

    Configurando o Aninhamento

    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 Aninhamento com React Intlayer

    Para usar conteúdo aninhado em um componente React, utilize o hook useIntlayer do pacote react-intlayer. Este hook recupera o conteúdo correto com base na chave especificada. Aqui está um exemplo de como usá-lo:

    **/*.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>
        Conteúdo Aninhado Completo: {JSON.stringify(fullNestedContent)}
        {/* Saída: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Valor Aninhado Parcial: {partialNestedContent}
        {/* Saída: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

    Recursos Adicionais

    Para mais informações detalhadas sobre configuração e uso, consulte os seguintes recursos:

    Esses recursos fornecem mais detalhes sobre a configuração e o uso do Intlayer em diferentes ambientes e com vários frameworks.

    Arquivo
    Markdown