Función de Obtener

Intlayer te permite declarar funciones de contenido en tus módulos de contenido, que pueden ser síncronas o asíncronas. Cuando la aplicación se construye, Intlayer ejecuta estas funciones para obtener el resultado de la función. El valor de retorno debe ser un objeto JSON o un valor simple como una cadena o un número.

Advertencia: la obtención de funciones no está actualmente disponible en la declaración de contenido JSON y archivos de declaraciones de contenido distantes.

Declaraciones de Funciones

Aquí hay un ejemplo de una función sencilla de obtención de contenido síncrona:

import type { DeclarationContent } from "intlayer";const functionContent = {  key: "function_content",  content: {    text: () => "Este es el contenido renderizado por una función",  },} satisfies DeclarationContent;export default functionContent;

En este ejemplo, la clave text contiene una función que devuelve una cadena. Este contenido puede ser renderizado en tus componentes de React utilizando los paquetes intérpretes de Intlayer como react-intlayer.

Obtención de Funciones Asincrónicas

Además de las funciones síncronas, Intlayer admite funciones asíncronas, permitiéndote obtener datos de fuentes externas o simular la recuperación de datos con datos simulados.

A continuación, se muestra un ejemplo de una función asíncrona que simula una obtención de servidor:

import { setTimeout } from "node:timers/promises";import type { DeclarationContent } from "intlayer";const fakeFetch = async (): Promise<string> => {  // Espera 200 ms para simular una obtención del servidor  return await setTimeout(200).then(    () => "Este es el contenido obtenido del servidor"  );};const asyncFunctionContent = {  key: "async_function",  content: { text: fakeFetch },} satisfies DeclarationContent;export default asyncFunctionContent;

En este caso, la función fakeFetch imita un retraso para simular el tiempo de respuesta del servidor. Intlayer ejecuta la función asíncrona y utiliza el resultado como contenido para la clave text.

Uso de Contenido Basado en Funciones en Componentes de React

Para usar contenido basado en funciones en un componente de React, necesitas importar useIntlayer de react-intlayer y llamarlo con el ID del contenido para recuperar el contenido. Aquí hay un ejemplo:

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>      {/* Salida: Este es el contenido renderizado por una función */}      <p>{asyncFunctionContent.text}</p>      {/* Salida: Este es el contenido obtenido del servidor */}    </div>  );};export default MyComponent;