Recupero Funzioni

Intlayer ti permette di dichiarare funzioni di contenuto nei tuoi moduli di contenuto, che possono essere sia sincrone che asincrone. Quando l'applicazione viene compilata, 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.

Attenzione: il recupero di funzioni non è attualmente disponibile nelle dichiarazioni di contenuto JSON e nei file di dichiarazioni di contenuto remoti.

Dichiarazioni di Funzioni

Ecco un esempio di una semplice funzione sincrona che recupera 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 interpreti di Intlayer come react-intlayer.

Recupero di Funzioni Asincrone

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

Di seguito un esempio di funzione asincrona che simula un recupero da 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 imitare 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;