Controle van ExodeUI State Machine-invoer vanuit React State
Een praktische gids voor het afspelen van een ExodeUI-bestand in React met het exodeui-pakket: booleaanse, nummer- en triggerinvoer instellen vanuit de React-status en omgaan met gebeurtenissen.
Kern afhaalmaaltijd
Installeer het exodeui-pakket, render het bestand met <ExodeUICanvas> en haal de engine op met de hook useExodeUI door setEngine door te geven aan onReady. Roep vervolgens setInputBool, setInputNumber of fireTrigger aan vanuit React-effecten en handlers om de statusmachine aan te sturen, en luister naar gebeurtenissen met onTrigger. Jouw React-status blijft de bron van de waarheid; het bestand is eigenaar van de motie.
Het model: uw code is eigenaar van gegevens, het bestand is eigenaar van beweging
Een ExodeUI-bestand bevat lagen, toestanden, overgangen en de ingangen die daartussen schakelen. Uw React-component beslist wanneer deze ingangen veranderen, op basis van zijn eigen status. Die splitsing houdt animatiecode uit uw componenten en laat ontwerpers de beweging veranderen zonder React aan te raken.
Installatie
Installeer de React-runtime met npm en installeer exodeui. Als u Vite gebruikt, voeg dan exodePlugin() van exodeui/vite-plugin toe aan uw Vite-configuratie zodat .exode-bestanden rechtstreeks kunnen worden geïmporteerd; geef anders een URL door naar het bestand met de src prop.
- ExodeUICanvas rekwisieten: src (URL) of tekengebied (geïmporteerde gegevens), pasvorm, uitlijning, autoPlay, onReady, onTrigger, onInputUpdate.
- useExodeUI retourneert setEngine plus setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger en getInputValue.
- Invoernamen moeten overeenkomen met de namen die in het bestand zijn gedefinieerd.
Booleans, cijfers en triggers
Gebruik een booleaanse waarde voor een status die aan blijft, zoals Loading. Gebruik een getal voor doorlopende waarden, zoals de voortgang van 0 naar 100. Gebruik een trigger voor een eenmalig moment, zoals Succes, die één keer afgaat en opnieuw wordt ingesteld. Stel in React booleans en getallen in een effect in dat afhankelijk is van de status, en activeer triggers in de handler waar de gebeurtenis plaatsvindt.
Gebeurtenissen terug naar React
Animaties kunnen uw code ook vertellen dat er iets is gebeurd, bijvoorbeeld dat er op een knop in het bestand is gedrukt of dat een succesanimatie is voltooid. Behandel deze met onTrigger, die de triggernaam ontvangt, en bewaar het echte werk, zoals API-aanroepen, in uw React-code.
Testen en toegankelijkheid
Omdat de beweging wordt aangestuurd door ingangen, kunt u de React-kant testen door te controleren welke ingangen voor elke status zijn ingesteld. Bewaar echte knoppen en labels in de DOM, of gebruik de ExodeSEO-component, die een visueel verborgen HTML-laag voor schermlezers kan genereren. Geef een Boolean met verminderde beweging door vanuit de systeeminstelling van de gebruiker als uw bestand er een definieert.
Productie-implementatiefragment
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>
);
}Toets Principles in om te onthouden
- Render met ExodeUICanvas en geef setEngine door van useExodeUI naar onReady
- Booleans voor doorlopende statussen, getallen voor continue waarden, triggers voor momenten
- Invoer instellen van React-effecten en handlers; De staat React blijft de bron van de waarheid
- Behandel gebeurtenissen uit het bestand met onTrigger
- Houd app-logica in React, beweging in het bestand
Veelgestelde vragen
Bronnen
- exodeui (React runtime) — npm