Função de Busca

Intlayer permite que você declare funções de conteúdo em seus módulos de conteúdo, que podem ser síncronas ou assíncronas. Quando a aplicação é construída, o Intlayer executa essas funções para obter o resultado da função. O valor de retorno deve ser um objeto JSON ou um valor simples, como uma string ou um número.

Aviso: a busca de função atualmente não está disponível na declaração de conteúdo JSON e em arquivos de declarações de conteúdo distantes.

Declarações de Função

Aqui está um exemplo de uma simples função síncrona que busca conteúdo:

import type { DeclarationContent } from "intlayer";const functionContent = {  key: "function_content",  content: {    text: () => "Este é o conteúdo renderizado por uma função",  },} satisfies DeclarationContent;export default functionContent;

Neste exemplo, a chave text contém uma função que retorna uma string. Este conteúdo pode ser renderizado em seus componentes React usando os pacotes interpretadores do Intlayer, como react-intlayer.

Busca de Função Assíncrona

Além das funções síncronas, o Intlayer suporta funções assíncronas, permitindo que você busque dados de fontes externas ou simule a recuperação de dados com dados fictícios.

Abaixo está um exemplo de uma função assíncrona que simula uma busca de servidor:

import { setTimeout } from "node:timers/promises";import type { DeclarationContent } from "intlayer";const fakeFetch = async (): Promise<string> => {  // Espera 200ms para simular uma busca do servidor  return await setTimeout(200).then(    () => "Este é o conteúdo buscado do servidor"  );};const asyncFunctionContent = {  key: "async_function",  content: { text: fakeFetch },} satisfies DeclarationContent;export default asyncFunctionContent;

Neste caso, a função fakeFetch imita um atraso para simular o tempo de resposta do servidor. O Intlayer executa a função assíncrona e usa o resultado como o conteúdo da chave text.

Usando Conteúdo Baseado em Função em Componentes React

Para usar conteúdo baseado em função em um componente React, você precisa importar useIntlayer de react-intlayer e chamá-lo com a ID do conteúdo para recuperar o conteúdo. Aqui está um exemplo:

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => {  const functionContent = useIntlayer("function_content");  const asyncFunctionContent = useIntlayer("async_function_content");  return (    <div>      <p>{functionContent.text}</p>      {/* Saída: Este é o conteúdo renderizado por uma função */}      <p>{asyncFunctionContent.text}</p>      {/* Saída: Este é o conteúdo buscado do servidor */}    </div>  );};export default MyComponent;