Styring af ExodeUI State Machine Inputs fra React State
En praktisk guide til afspilning af en ExodeUI-fil i React med exodeui-pakken: indstilling af boolean, antal og trigger-input fra React-tilstand og håndtering af hændelser.
Core Takeaway
Installer exodeui-pakken, gengiv filen med <ExodeUICanvas>, og få motoren med useExodeUI-krogen ved at sende setEngine til onReady. Kald derefter setInputBool, setInputNumber eller fireTrigger fra React effekter og handlere for at drive tilstandsmaskinen, og lyt efter hændelser med onTrigger. Din React-tilstand forbliver kilden til sandheden; filen ejer forslaget.
Modellen: din kode ejer data, filen ejer bevægelse
En ExodeUI-fil indeholder lag, tilstande, overgange og de input, der skifter mellem dem. Din React-komponent bestemmer, hvornår disse inputs ændres, baseret på dens egen tilstand. Denne opdeling holder animationskoden ude af dine komponenter og lader designere ændre bevægelsen uden at røre ved React.
Opsætning
Installer React runtime med npm installer exodeui. Hvis du bruger Vite, tilføj exodePlugin() fra exodeui/vite-plugin til din Vite-konfiguration, så .exode-filer kan importeres direkte; ellers videregive en URL til filen med src prop.
- ExodeUICanvas rekvisitter: src (URL) eller tegnebræt (importerede data), tilpasning, justering, autoPlay, onReady, onTrigger, onInputUpdate.
- useExodeUI returnerer setEngine plus setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger og getInputValue.
- Inputnavne skal matche de navne, der er defineret i filen.
Boolean, tal og triggere
Brug en boolean for en tilstand, der forbliver aktiv, f.eks. Indlæser. Brug et tal for kontinuerlige værdier, såsom fremskridt fra 0 til 100. Brug en udløser til et enkeltstående øjeblik, såsom succes, som udløses én gang og nulstilles. I React skal du indstille booleaner og tal i en effekt, der afhænger af tilstanden, og udløse triggere i handleren, hvor hændelsen finder sted.
Begivenheder tilbage til React
Animationer kan også fortælle din kode, at der er sket noget, for eksempel at der blev trykket på en knap inde i filen, eller at en vellykket animation blev afsluttet. Håndter disse med onTrigger, som modtager triggernavnet, og behold det rigtige arbejde, såsom API-kald, i din React-kode.
Test og tilgængelighed
Fordi bevægelsen drives af input, kan du teste React-siden ved at kontrollere, hvilke input der er indstillet for hver tilstand. Hold rigtige knapper og etiketter i DOM, eller brug ExodeSEO-komponenten, som kan generere et visuelt skjult HTML-lag til skærmlæsere. Send en boolean med reduceret bevægelse fra brugerens systemindstilling, hvis din fil definerer en.
Snippet til produktionsimplementering
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>
);
}Tast Principles for at huske
- Gengiv med ExodeUICanvas og overfør setEngine fra useExodeUI til onReady
- Booleaner for igangværende tilstande, tal for kontinuerlige værdier, udløsere for øjeblikke
- Indstil input fra React effekter og handlere; React tilstand forbliver kilden til sandheden
- Håndter hændelser fra filen med onTrigger
- Hold app-logik i React, bevægelse i filen
Ofte stillede spørgsmål
Kilder
- exodeui (React runtime) — npm