Conteúdo de Inserção / Inserção no Intlayer

Como a Inserção Funciona

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 templates, onde partes específicas do conteúdo são determinadas pelos dados fornecidos pela 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 substituídos.

Configurando Conteúdo de Inserção

Para configurar 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(      // Inserção com placeholders para nome e idade      "Hello, my name is {{name}} and I am {{age}} years old!"    ),  },} satisfies Dictionary;export default myInsertionContent;

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

Para utilizar 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 placeholder no seu conteúdo para o valor que 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: "Hello, my name is John and I am 30 years old!" */          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 React Intlayer
• Documentação Next Intlayer

Estes recursos oferecem mais informações sobre a configuração e uso do Intlayer em diversos ambientes e frameworks.

Histórico do Documento

• 5.5.10 - 2025-06-29: Histórico inicial