Funzione di Recupero

Intlayer consente di dichiarare funzioni di contenuto nei tuoi moduli di contenuto, che possono essere sincrone o asincrone. Quando l'applicazione viene costruita, Intlayer esegue queste funzioni per ottenere il risultato della funzione. Il valore restituito deve essere un oggetto JSON o un valore semplice come una stringa o un numero.

Avviso: il recupero delle funzioni non è attualmente disponibile nella dichiarazione di contenuti JSON e nei file di dichiarazione di contenuti remoti.

Dichiarazioni di Funzioni

Ecco un esempio di una semplice funzione sincrona per il recupero del contenuto:

import type { Dictionary } from "intlayer";const functionContent = {  key: "function_content",  content: {    text: () => "Questo è il contenuto reso da una funzione",  },} satisfies Dictionary;export default functionContent;

In questo esempio, la chiave text contiene una funzione che restituisce una stringa. Questo contenuto può essere reso nei tuoi componenti React utilizzando i pacchetti interprete di Intlayer come react-intlayer.

Recupero di Funzioni Asincrone

Oltre alle funzioni sincrone, Intlayer supporta funzioni asincrone, consentendo di recuperare dati da fonti esterne o simulare il recupero di dati con dati mock.

Di seguito è riportato un esempio di una funzione asincrona che simula un recupero dal server:

import { setTimeout } from "node:timers/promises";import type { Dictionary } from "intlayer";const fakeFetch = async (): Promise<string> => {  // Attendi 200ms per simulare un recupero dal server  return await setTimeout(200).then(    () => "Questo è il contenuto recuperato dal server"  );};const asyncFunctionContent = {  key: "async_function",  content: { text: fakeFetch },} satisfies Dictionary;export default asyncFunctionContent;

In questo caso, la funzione fakeFetch simula un ritardo per simulare il tempo di risposta del server. Intlayer esegue la funzione asincrona e utilizza il risultato come contenuto per la chiave text.

Utilizzo di Contenuti Basati su Funzioni nei Componenti React

Per utilizzare contenuti basati su funzioni in un componente React, è necessario importare useIntlayer da react-intlayer e chiamarlo con l'ID del contenuto per recuperare il contenuto. Ecco un esempio:

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>      {/* Output: Questo è il contenuto reso da una funzione */}      <p>{asyncFunctionContent.text}</p>      {/* Output: Questo è il contenuto recuperato dal server */}    </div>  );};export default MyComponent;