Controlando entradas da máquina de estado ExodeUI do estado React
Um guia prático para reproduzir um arquivo ExodeUI em React com o pacote exodeui: configurando entradas booleanas, numéricas e de acionamento do estado React e manipulação de eventos.
Ponto principal
Instale o pacote exodeui, renderize o arquivo com <ExodeUICanvas> e obtenha o mecanismo com o gancho useExodeUI passando setEngine para onReady. Em seguida, chame setInputBool, setInputNumber ou fireTrigger dos efeitos e manipuladores React para acionar a máquina de estado e ouça eventos com onTrigger. Seu estado React continua sendo a fonte da verdade; o arquivo possui o movimento.
O modelo: seu código possui dados, o arquivo possui movimento
Um arquivo ExodeUI contém camadas, estados, transições e as entradas que alternam entre eles. Seu componente React decide quando essas entradas mudam, com base em seu próprio estado. Essa divisão mantém o código de animação fora de seus componentes e permite que os designers alterem o movimento sem tocar em React.
Configurar
Instale o tempo de execução React com npm instale exodeui. Se você usar Vite, adicione exodePlugin() de exodeui/vite-plugin à sua configuração Vite para que os arquivos .exode possam ser importados diretamente; caso contrário, passe uma URL para o arquivo com a propriedade src.
- Adereços ExodeUICanvas: src (URL) ou prancheta (dados importados), ajuste, alinhamento, reprodução automática, onReady, onTrigger, onInputUpdate.
- useExodeUI retorna setEngine mais setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger e getInputValue.
- Os nomes de entrada devem corresponder aos nomes definidos no arquivo.
Booleanos, números e gatilhos
Use um booleano para um estado que permanece ativo, como Carregando. Use um número para valores contínuos, como progresso de 0 a 100. Use um gatilho para um momento único, como Sucesso, que é acionado uma vez e reiniciado. Em React, defina booleanos e números em um efeito que depende do estado e dispare gatilhos no manipulador onde o evento acontece.
Eventos de volta a React
As animações também podem informar ao seu código que algo aconteceu, por exemplo, que um botão dentro do arquivo foi pressionado ou uma animação bem-sucedida foi concluída. Lide com isso com onTrigger, que recebe o nome do gatilho, e mantenha o trabalho real, como chamadas de API, em seu código React.
Teste e acessibilidade
Como o movimento é acionado por entradas, você pode testar o lado React verificando quais entradas estão definidas para cada estado. Mantenha botões e rótulos reais no DOM ou use o componente ExodeSEO, que pode gerar uma camada HTML visualmente oculta para leitores de tela. Passe um booleano de movimento reduzido da configuração do sistema do usuário se o seu arquivo definir um.
Trecho de implementação em produção
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>
);
}Princípios-chave para lembrar
- Renderize com ExodeUICanvas e passe setEngine de useExodeUI para onReady
- Booleanos para estados contínuos, números para valores contínuos, gatilhos para momentos
- Defina entradas de efeitos e manipuladores React; O estado React continua sendo a fonte da verdade
- Lidar com eventos do arquivo com onTrigger
- Mantenha a lógica do aplicativo em React, movimento no arquivo
Perguntas frequentes
Fontes
- exodeui (React runtime) — npm