Funzione di Fetching
Dichiarazioni di Funzione
Intlayer ti consente di dichiarare funzioni di contenuto nei tuoi moduli di contenuto, che possono essere sia sincrone che asincrone. Quando l'applicazione viene costruita, Intlayer esegue queste funzioni per ottenere il risultato della funzione. Il valore di ritorno deve essere un oggetto JSON o un valore semplice come una stringa o un numero.
Ecco un esempio di una semplice funzione sincrona che recupera contenuto:
1import type { DeclarationContent } from "intlayer";
2
3const functionContent = {
4 key: "function_content",
5 content: {
6 text: () => "Questo è il contenuto reso da una funzione",
7 },
8} satisfies DeclarationContent;
9
10export default functionContent;In questo esempio, la chiave text contiene una funzione che restituisce una stringa. Questo contenuto può essere visualizzato nei tuoi componenti React utilizzando i pacchetti di interprete di Intlayer come react-intlayer.
Funzione di Fetching Asincrona
Oltre alle funzioni sincrone, Intlayer supporta funzioni asincrone, che ti permettono di recuperare dati da fonti esterne o simulare il recupero di dati con dati fittizi.
Di seguito un esempio di una funzione asincrona che simula un fetch dal server:
1import { setTimeout } from "node:timers/promises";
2import type { DeclarationContent } from "intlayer";
3
4const fakeFetch = async (): Promise<string> => {
5 // Aspetta 200ms per simulare un fetch dal server
6 return await setTimeout(200).then(
7 () => "Questo è il contenuto recuperato dal server"
8 );
9};
10
11const asyncFunctionContent = {
12 key: "async_function",
13 content: { text: fakeFetch },
14} satisfies DeclarationContent;
15
16export default asyncFunctionContent;In questo caso, la funzione fakeFetch imita 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:
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 {/* Output: Questo è il contenuto reso da una funzione */}
11 <p>{asyncFunctionContent.text}</p>
12 {/* Output: Questo è il contenuto recuperato dal server */}
13 </div>
14 );
15};
16
17export default MyComponent;Se hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.
Collegamento GitHub alla documentazione