Fonction de Récupération
Déclarations de Fonction
Intlayer vous permet de déclarer des fonctions de contenu dans vos modules de contenu, qui peuvent être soit synchrones, soit asynchrones. Lorsque l'application se construit, Intlayer exécute ces fonctions pour obtenir le résultat de la fonction. La valeur retournée doit être un objet JSON ou une valeur simple comme une chaîne ou un nombre.
Voici un exemple d'une fonction simple synchrones récupérant du contenu :
1import type { DeclarationContent } from "intlayer";
2
3const functionContent = {
4 key: "function_content",
5 content: {
6 text: () => "Ceci est le contenu rendu par une fonction",
7 },
8} satisfies DeclarationContent;
9
10export default functionContent;Dans cet exemple, la clé text contient une fonction qui retourne une chaîne. Ce contenu peut être rendu dans vos composants React en utilisant les packages d'interprétation d'Intlayer comme react-intlayer.
Récupération de Fonction Asynchrone
En plus des fonctions synchrones, Intlayer prend en charge les fonctions asynchrones, vous permettant de récupérer des données à partir de sources externes ou de simuler la récupération de données avec des données fictives.
Voici un exemple d'une fonction asynchrone qui simule une récupération depuis le serveur :
1import { setTimeout } from "node:timers/promises";
2import type { DeclarationContent } from "intlayer";
3
4const fakeFetch = async (): Promise<string> => {
5 // Attendre 200 ms pour simuler une récupération depuis le serveur
6 return await setTimeout(200).then(
7 () => "Ceci est le contenu récupéré depuis le serveur"
8 );
9};
10
11const asyncFunctionContent = {
12 key: "async_function",
13 content: { text: fakeFetch },
14} satisfies DeclarationContent;
15
16export default asyncFunctionContent;Dans ce cas, la fonction fakeFetch imite un délai pour simuler le temps de réponse du serveur. Intlayer exécute la fonction asynchrone et utilise le résultat comme contenu pour la clé text.
Utiliser le Contenu Basé sur des Fonctions dans des Composants React
Pour utiliser du contenu basé sur des fonctions dans un composant React, vous devez importer useIntlayer de react-intlayer et l'appeler avec l'ID de contenu pour récupérer le contenu. Voici un exemple :
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 {/* Sortie : Ceci est le contenu rendu par une fonction */}
11 <p>{asyncFunctionContent.text}</p>
12 {/* Sortie : Ceci est le contenu récupéré depuis le serveur */}
13 </div>
14 );
15};
16
17export default MyComponent;Si vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.
Lien GitHub de la documentation