Como Funciona a Inserção

No Intlayer, o conteúdo de inserção é realizado através da função insertion, que identifica campos de espaço reservado em uma string (como {{name}} ou {{age}}) que podem ser substituídos dinamicamente em tempo de execução. Essa abordagem permite criar strings flexíveis, semelhantes a modelos, onde partes específicas do conteúdo são determinadas pelos dados passados a partir de sua aplicação.

Quando integrado com React Intlayer ou Next Intlayer, você pode simplesmente fornecer o objeto de dados contendo os valores para cada espaço reservado, e o Intlayer renderizará automaticamente o conteúdo com os espaços reservados substituídos.

Configurando Conteúdo de Inserção

Para configurar o conteúdo de inserção no seu projeto Intlayer, crie um módulo de conteúdo que inclua suas definições de inserção. Abaixo estão exemplos em vários formatos.

import { insert, type Dictionary } from "intlayer";const myInsertionContent = {  key: "my_key",  content: {    myInsertion: insert("Olá, meu nome é {{name}} e eu tenho {{age}} anos!"),  },} satisfies Dictionary;export default myInsertionContent;

Usando Conteúdo de Inserção com React Intlayer

Para utilizar o conteúdo de inserção dentro de um componente React, importe e use o hook useIntlayer do pacote react-intlayer. Este hook recupera o conteúdo para a chave especificada e permite que você passe um objeto que mapeia cada espaço reservado no seu conteúdo para o valor que você deseja exibir.

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const InsertionComponent: FC = () => {  const { myInsertion } = useIntlayer("my_key");  return (    <div>      <p>        {          /* Saída: "Olá, meu nome é John e eu tenho 30 anos!" */          myInsertion({ name: "John", age: "30" })        }      </p>      <p>        {          /* Você pode reutilizar a mesma inserção com valores diferentes */          myInsertion({ name: "Alice", age: "25" })        }      </p>    </div>  );};export default InsertionComponent;

Recursos Adicionais

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

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

Esses recursos oferecem mais insights sobre a configuração e o uso do Intlayer em diversos ambientes e frameworks.