Contrôle des entrées de la machine d'état ExodeUI à partir de l'état React
Un guide pratique pour lire un fichier ExodeUI dans React avec le package exodeui : définition des entrées booléennes, numériques et de déclenchement à partir de l'état React et gestion des événements.
À retenir
Installez le package exodeui, restituez le fichier avec <ExodeUICanvas> et obtenez le moteur avec le hook useExodeUI en passant setEngine à onReady. Appelez ensuite setInputBool, setInputNumber ou fireTrigger à partir des effets et gestionnaires React pour piloter la machine à états et écoutez les événements avec onTrigger. Votre état React reste la source de vérité ; le fichier est propriétaire du mouvement.
Le modèle : votre code possède les données, le fichier possède le mouvement
Un fichier ExodeUI contient des calques, des états, des transitions et les entrées qui basculent entre eux. Votre composant React décide quand ces entrées changent, en fonction de son propre état. Cette division maintient le code d'animation hors de vos composants et permet aux concepteurs de modifier le mouvement sans toucher à React.
Installation
Installez le runtime React avec npm installez exodeui. Si vous utilisez Vite, ajoutez exodePlugin() de exodeui/vite-plugin à votre configuration Vite afin que les fichiers .exode puissent être importés directement ; sinon, transmettez une URL au fichier avec la prop src.
- Accessoires ExodeUICanvas : src (URL) ou plan de travail (données importées), ajustement, alignement, autoPlay, onReady, onTrigger, onInputUpdate.
- useExodeUI renvoie setEngine plus setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger et getInputValue.
- Les noms d'entrée doivent correspondre aux noms définis dans le fichier.
Booléens, nombres et déclencheurs
Utilisez un booléen pour un état qui reste activé, tel que Chargement. Utilisez un nombre pour les valeurs continues, telles que la progression de 0 à 100. Utilisez un déclencheur pour un moment ponctuel, tel que Succès, qui se déclenche une fois et se réinitialise. Dans React, définissez les booléens et les nombres dans un effet qui dépend de l'état, et déclenchez des déclencheurs dans le gestionnaire où l'événement se produit.
Événements retour à React
Les animations peuvent également indiquer à votre code que quelque chose s'est produit, par exemple qu'un bouton à l'intérieur du fichier a été enfoncé ou qu'une animation réussie s'est terminée. Gérez-les avec onTrigger, qui reçoit le nom du déclencheur, et conservez le travail réel, tel que les appels API, dans votre code React.
Tests et accessibilité
Étant donné que le mouvement est piloté par des entrées, vous pouvez tester le côté React en vérifiant quelles entrées sont définies pour chaque état. Conservez les vrais boutons et étiquettes dans le DOM, ou utilisez le composant ExodeSEO, qui peut générer une couche HTML visuellement cachée pour les lecteurs d'écran. Transmettez un booléen à mouvement réduit à partir des paramètres système de l'utilisateur si votre fichier en définit un.
Extrait d’implémentation en production
import { useEffect } from 'react';
import { ExodeUICanvas, useExodeUI } from 'exodeui';
import saveButton from './save-button.exode'; // needs exodePlugin() from 'exodeui/vite-plugin'
export function SaveButton({ saving, progress, justSaved, onSave }) {
const { setEngine, setInputBool, setInputNumber, fireTrigger } = useExodeUI();
// Boolean: a state that stays on while saving
useEffect(() => { setInputBool('Loading', saving); }, [saving, setInputBool]);
// Number: continuous progress, 0 to 100
useEffect(() => { setInputNumber('Progress', progress); }, [progress, setInputNumber]);
// Trigger: a one-off moment
useEffect(() => { if (justSaved) fireTrigger('Success'); }, [justSaved, fireTrigger]);
return (
<div style={{ width: 240, height: 64 }}>
<ExodeUICanvas
artboard={saveButton}
onReady={setEngine}
onTrigger={(name) => { if (name === 'Pressed') onSave(); }}
/>
</div>
);
}Principes clés à retenir
- Effectuez le rendu avec ExodeUICanvas et transmettez setEngine de useExodeUI à onReady
- Booléens pour les états en cours, nombres pour les valeurs continues, déclencheurs pour les instants
- Définir les entrées des effets et des gestionnaires React ; L'état React reste la source de la vérité
- Gérer les événements du fichier avec onTrigger
- Conserver la logique de l'application dans React, le mouvement dans le fichier
Questions fréquentes
Sources
- exodeui (React runtime) — npm