Control de las entradas de la máquina de estados ExodeUI desde el estado React
Una guía práctica para reproducir un archivo ExodeUI en React con el paquete exodeui: configuración de entradas booleanas, numéricas y de activación desde el estado React y manejo de eventos.
Idea clave
Instale el paquete exodeui, renderice el archivo con <ExodeUICanvas> y obtenga el motor con el gancho useExodeUI pasando setEngine a onReady. Luego llame a setInputBool, setInputNumber o fireTrigger desde los efectos y controladores React para controlar la máquina de estado y escuche los eventos con onTrigger. Su estado React sigue siendo la fuente de la verdad; el archivo es dueño de la moción.
El modelo: su código posee datos, el archivo posee movimiento
Un archivo ExodeUI contiene capas, estados, transiciones y las entradas que cambian entre ellos. Su componente React decide cuándo cambian esas entradas, según su propio estado. Esa división mantiene el código de animación fuera de sus componentes y permite a los diseñadores cambiar el movimiento sin tocar React.
Configuración
Instale el tiempo de ejecución React con npm instale exodeui. Si usa Vite, agregue exodePlugin() de exodeui/vite-plugin a su configuración Vite para que los archivos .exode se puedan importar directamente; de lo contrario, pase una URL al archivo con la propiedad src.
- Accesorios ExodeUICanvas: src (URL) o mesa de trabajo (datos importados), ajuste, alineación, reproducción automática, onReady, onTrigger, onInputUpdate.
- useExodeUI devuelve setEngine más setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger y getInputValue.
- Los nombres de entrada deben coincidir con los nombres definidos en el archivo.
Booleanos, números y disparadores
Utilice un valor booleano para un estado que permanece activo, como Cargando. Utilice un número para valores continuos, como el progreso de 0 a 100. Utilice un disparador para un momento único, como Éxito, que se activa una vez y se reinicia. En React, establezca valores booleanos y números en un efecto que dependa del estado y active activadores en el controlador donde ocurre el evento.
Eventos volver a React
Las animaciones también pueden indicarle a su código que algo sucedió, por ejemplo, que se presionó un botón dentro del archivo o que se completó una animación exitosa. Manéjelos con onTrigger, que recibe el nombre del activador, y mantenga el trabajo real, como las llamadas API, en su código React.
Pruebas y accesibilidad
Debido a que el movimiento es impulsado por entradas, puede probar el lado React verificando qué entradas están configuradas para cada estado. Mantenga botones y etiquetas reales en el DOM o utilice el componente ExodeSEO, que puede generar una capa HTML visualmente oculta para lectores de pantalla. Pase un booleano de movimiento reducido desde la configuración del sistema del usuario si su archivo define uno.
Fragmento de implementación en producción
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>
);
}Principios clave para recordar
- Renderice con ExodeUICanvas y pase setEngine de useExodeUI a onReady
- Booleanos para estados en curso, números para valores continuos, activadores para momentos
- Establezca entradas de efectos y controladores React; El estado React sigue siendo la fuente de la verdad
- Manejar eventos del archivo con onTrigger
- Mantenga la lógica de la aplicación en React, movimiento en el archivo
Preguntas frecuentes
Fuentes
- exodeui (React runtime) — npm