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 por sua chave.

Configurando o Aninhamento

Para configurar o aninhamento 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 com conteúdo aninhado:

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 com Nest

Agora, crie outro módulo de conteúdo que usa a função nest para referenciar o conteúdo acima. Você pode referenciar o conteúdo inteiro ou um valor específico aninhado:

import { nest, type Dictionary } from "intlayer";const myNestingContent = {  key: "key_of_my_second_dictionary",  content: {    // Referencia o dicionário inteiro:    fullNestedContent: nest("key_of_my_first_dictionary"),    // Referencia um valor específico aninhado:    partialNestedContent: nest(      "key_of_my_first_dictionary",      "subContent.contentNumber"    ),  },} satisfies Dictionary;export default myNestingContent;

Como segundo parâmetro, você pode especificar um caminho para um valor aninhado dentro daquele conteúdo. Quando nenhum caminho é fornecido, o conteúdo inteiro do dicionário referenciado é retornado.

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:

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)}        {/* Saída: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}      </p>      <p>        Partial Nested Value: {partialNestedContent}        {/* Saída: 0 */}      </p>    </div>  );};export default NestComponent;

Recursos Adicionais

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

• Documentação do CLI Intlayer
• Documentação de React Intlayer
• Documentação de Next Intlayer

Estes recursos fornecem mais insights sobre a configuração e uso do Intlayer em diferentes ambientes e com diversos frameworks.