Kontrollere ExodeUI State Machine-innganger fra React State
En praktisk veiledning for å spille av en ExodeUI-fil i React med exodeui-pakken: innstilling av boolsk, antall og trigger-innganger fra React-tilstand og håndtering av hendelser.
Kjerne takeaway
Installer exodeui-pakken, gjengi filen med <ExodeUICanvas>, og få motoren med useExodeUI-kroken ved å sende setEngine til onReady. Ring deretter setInputBool, setInputNumber eller fireTrigger fra React-effekter og behandlere for å drive tilstandsmaskinen, og lytt etter hendelser med onTrigger. Din React-tilstand forblir kilden til sannhet; filen eier bevegelsen.
Modellen: koden din eier data, filen eier bevegelse
En ExodeUI-fil inneholder lag, tilstander, overganger og inngangene som bytter mellom dem. Din React-komponent bestemmer når disse inngangene endres, basert på dens egen tilstand. Denne splittelsen holder animasjonskoden ute av komponentene dine og lar designere endre bevegelsen uten å berøre React.
Oppsett
Installer React runtime med npm installer exodeui. Hvis du bruker Vite, legg til exodePlugin() fra exodeui/vite-plugin til Vite-konfigurasjonen slik at .exode-filer kan importeres direkte; ellers send en URL til filen med src prop.
- ExodeUICanvas rekvisitter: src (URL) eller tegnebrett (importerte data), tilpasning, justering, autoPlay, onReady, onTrigger, onInputUpdate.
- useExodeUI returnerer setEngine pluss setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger og getInputValue.
- Inndatanavn må samsvare med navnene som er definert i filen.
Boolske verdier, tall og triggere
Bruk en boolsk for en tilstand som forblir på, for eksempel Laster. Bruk et tall for kontinuerlige verdier, for eksempel fremgang fra 0 til 100. Bruk en trigger for et engangsøyeblikk, for eksempel Suksess, som utløses én gang og tilbakestilles. I React, sett booleaner og tall i en effekt som avhenger av tilstanden, og brannutløsere i behandleren der hendelsen skjer.
Hendelser tilbake til React
Animasjoner kan også fortelle koden din at noe har skjedd, for eksempel at en knapp inne i filen ble trykket eller en vellykket animasjon fullført. Håndter disse med onTrigger, som mottar utløsernavnet, og hold det virkelige arbeidet, for eksempel API-kall, i React-koden din.
Testing og tilgjengelighet
Fordi bevegelsen er drevet av innganger, kan du teste React-siden ved å sjekke hvilke innganger som er satt for hver tilstand. Behold ekte knapper og etiketter i DOM, eller bruk ExodeSEO-komponenten, som kan generere et visuelt skjult HTML-lag for skjermlesere. Send en boolsk verdi med redusert bevegelse fra brukerens systeminnstilling hvis filen din definerer en.
Snippet for produksjonsimplementering
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 å huske
- Gjengi med ExodeUICanvas og send setEngine fra useExodeUI til onReady
- Boolske verdier for pågående tilstander, tall for kontinuerlige verdier, utløsere for øyeblikk
- Angi innganger fra React effekter og behandlere; React staten forblir kilden til sannheten
- Håndter hendelser fra filen med onTrigger
- Hold applogikken i React, bevegelse i filen
Ofte stilte spørsmål
Kilder
- exodeui (React runtime) — npm