Steuern der ExodeUI-Zustandsmaschineneingänge vom React-Zustand
Eine praktische Anleitung zum Abspielen einer ExodeUI-Datei in React mit dem exodeui-Paket: Festlegen von Booleschen, Zahlen- und Triggereingängen aus dem React-Status und Behandeln von Ereignissen.
Kernaussage
Installieren Sie das exodeui-Paket, rendern Sie die Datei mit <ExodeUICanvas> und rufen Sie die Engine mit dem useExodeUI-Hook ab, indem Sie setEngine an onReady übergeben. Rufen Sie dann setInputBool, setInputNumber oder fireTrigger von React-Effekten und -Handlern auf, um die Zustandsmaschine zu steuern, und warten Sie mit onTrigger auf Ereignisse. Ihr React-Zustand bleibt die Quelle der Wahrheit; Die Datei besitzt den Antrag.
Das Modell: Ihr Code besitzt Daten, die Datei besitzt Bewegung
Eine ExodeUI-Datei enthält Ebenen, Zustände, Übergänge und die Eingaben, die zwischen ihnen wechseln. Ihre React-Komponente entscheidet basierend auf ihrem eigenen Status, wann sich diese Eingaben ändern. Diese Aufteilung hält Animationscode von Ihren Komponenten fern und ermöglicht es Designern, die Bewegung zu ändern, ohne React zu berühren.
Aufstellen
Installieren Sie die React-Laufzeit mit npm und installieren Sie exodeui. Wenn Sie Vite verwenden, fügen Sie exodePlugin() aus exodeui/vite-plugin zu Ihrer Vite-Konfiguration hinzu, damit .exode-Dateien direkt importiert werden können; andernfalls übergeben Sie mit der src-Requisite eine URL an die Datei.
- ExodeUICanvas-Requisiten: Quelle (URL) oder Zeichenfläche (importierte Daten), Anpassung, Ausrichtung, AutoPlay, onReady, onTrigger, onInputUpdate.
- useExodeUI gibt setEngine plus setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger und getInputValue zurück.
- Eingabenamen müssen mit den in der Datei definierten Namen übereinstimmen.
Boolesche Werte, Zahlen und Trigger
Verwenden Sie einen booleschen Wert für einen Status, der eingeschaltet bleibt, z. B. „Laden“. Verwenden Sie eine Zahl für kontinuierliche Werte, z. B. den Fortschritt von 0 bis 100. Verwenden Sie einen Auslöser für einen einmaligen Moment, z. B. „Erfolg“, der einmal ausgelöst und dann zurückgesetzt wird. Legen Sie in React boolesche Werte und Zahlen in einem vom Status abhängigen Effekt fest und lösen Sie Trigger im Handler aus, in dem das Ereignis auftritt.
Ereignisse zurück zu React
Animationen können Ihrem Code auch mitteilen, dass etwas passiert ist, zum Beispiel, dass eine Schaltfläche in der Datei gedrückt wurde oder eine erfolgreiche Animation abgeschlossen wurde. Behandeln Sie diese mit onTrigger, das den Triggernamen erhält, und behalten Sie die eigentliche Arbeit, wie z. B. API-Aufrufe, in Ihrem React-Code.
Prüfung und Zugänglichkeit
Da die Bewegung durch Eingänge gesteuert wird, können Sie die React-Seite testen, indem Sie prüfen, welche Eingänge für jeden Zustand gesetzt sind. Behalten Sie echte Schaltflächen und Beschriftungen im DOM oder verwenden Sie die ExodeSEO-Komponente, die eine visuell verborgene HTML-Ebene für Bildschirmleseprogramme generieren kann. Übergeben Sie einen booleschen Wert mit reduzierter Bewegung aus der Systemeinstellung des Benutzers, sofern Ihre Datei einen solchen definiert.
Produktionsnahes Implementierungsbeispiel
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>
);
}Wichtige Prinzipien
- Rendern Sie mit ExodeUICanvas und übergeben Sie setEngine von useExodeUI an onReady
- Boolesche Werte für fortlaufende Zustände, Zahlen für fortlaufende Werte, Auslöser für Momente
- Eingaben von React-Effekten und -Handlern festlegen; Der React-Staat bleibt die Quelle der Wahrheit
- Behandeln Sie Ereignisse aus der Datei mit onTrigger
- Behalten Sie die App-Logik in React und die Bewegung in der Datei bei
Häufige Fragen
Quellen
- exodeui (React runtime) — npm