Styra ExodeUI State Machine Inputs from React State
En praktisk guide för att spela en ExodeUI-fil i React med exodeui-paketet: ställa in boolean, antal och triggeringångar från React-tillstånd och hantering av händelser.
Core Takeaway
Installera exodeui-paketet, rendera filen med <ExodeUICanvas> och hämta motorn med useExodeUI-kroken genom att skicka setEngine till onReady. Ring sedan setInputBool, setInputNumber eller fireTrigger från React effekter och hanterare för att driva tillståndsmaskinen och lyssna efter händelser med onTrigger. Ditt React-tillstånd förblir källan till sanningen; filen äger motionen.
Modellen: din kod äger data, filen äger rörelse
En ExodeUI-fil innehåller lager, tillstånd, övergångar och de ingångar som växlar mellan dem. Din React-komponent bestämmer när dessa ingångar ändras, baserat på dess eget tillstånd. Den uppdelningen håller animationskoden borta från dina komponenter och låter designers ändra rörelsen utan att röra React.
Inställning
Installera React runtime med npm installera exodeui. Om du använder Vite, lägg till exodePlugin() från exodeui/vite-plugin till din Vite-konfiguration så att .exode-filer kan importeras direkt; annars skicka en URL till filen med src prop.
- ExodeUICanvas rekvisita: src (URL) eller rityta (importerad data), passning, justering, autoPlay, onReady, onTrigger, onInputUpdate.
- useExodeUI returnerar setEngine plus setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger och getInputValue.
- Inmatade namn måste matcha namnen som definierats i filen.
Booleans, siffror och triggers
Använd en boolean för ett tillstånd som förblir på, till exempel Laddar. Använd ett nummer för kontinuerliga värden, till exempel framsteg från 0 till 100. Använd en utlösare för ett enstaka ögonblick, till exempel Success, som avfyras en gång och återställs. I React ställer du in booleaner och siffror i en effekt som beror på tillståndet, och utlöser utlösare i hanteraren där händelsen inträffar.
Händelser tillbaka till React
Animationer kan också berätta för din kod att något hänt, till exempel att en knapp inne i filen trycktes ned eller att en lyckad animering avslutades. Hantera dessa med onTrigger, som får triggernamnet, och behåll det verkliga arbetet, såsom API-anrop, i din React-kod.
Testning och tillgänglighet
Eftersom rörelsen drivs av ingångar kan du testa React-sidan genom att kontrollera vilka ingångar som är inställda för varje tillstånd. Behåll riktiga knappar och etiketter i DOM, eller använd ExodeSEO-komponenten, som kan generera ett visuellt dolt HTML-lager för skärmläsare. Passera en reducerad boolean från användarens systeminställning om din fil definierar en.
Produktionsimplementeringsutdrag
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>
);
}Nyckel Principles att komma ihåg
- Rendera med ExodeUICanvas och skicka setEngine från useExodeUI till onReady
- Boolean för pågående tillstånd, siffror för kontinuerliga värden, utlösare för ögonblick
- Ställ in ingångar från React effekter och hanterare; React tillstånd förblir källan till sanningen
- Hantera händelser från filen med onTrigger
- Behåll applogik i React, rörelse i filen
Vanliga frågor
Källor
- exodeui (React runtime) — npm