Função de Busca
Declarações de Função
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 número.
Aqui está um exemplo de uma função síncrona simples que busca conteúdo:
1import type { DeclarationContent } from "intlayer";
2
3const functionContent = {
4 key: "function_content",
5 content: {
6 text: () => "Este é o conteúdo renderizado por uma função",
7 },
8} satisfies DeclarationContent;
9
10export 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 intérpretes 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 no servidor:
1import { setTimeout } from "node:timers/promises";
2import type { DeclarationContent } from "intlayer";
3
4const fakeFetch = async (): Promise<string> => {
5 // Aguarda 200ms para simular uma busca no servidor
6 return await setTimeout(200).then(
7 () => "Este é o conteúdo buscado do servidor"
8 );
9};
10
11const asyncFunctionContent = {
12 key: "async_function",
13 content: { text: fakeFetch },
14} satisfies DeclarationContent;
15
16export 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 para a chave text.
Usando Conteúdo Baseado em Funções em Componentes React
Para usar conteúdo baseado em funções em um componente React, você precisa importar useIntlayer de react-intlayer e chamá-lo com o ID do conteúdo para recuperar o conteúdo. Aqui está um exemplo:
1import { useIntlayer } from "react-intlayer";
2
3const MyComponent = () => {
4 const functionContent = useIntlayer("function_content");
5 const asyncFunctionContent = useIntlayer("async_function_content");
6
7 return (
8 <div>
9 <p>{functionContent.text}</p>
10 {/* Saída: Este é o conteúdo renderizado por uma função */}
11 <p>{asyncFunctionContent.text}</p>
12 {/* Saída: Este é o conteúdo buscado do servidor */}
13 </div>
14 );
15};
16
17export default MyComponent;Se você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.
Link do GitHub para a documentação