Mengontrol Input Mesin Status ExodeUI dari Status React
Panduan praktis untuk memutar file ExodeUI di React dengan paket exodeui: mengatur input boolean, angka dan pemicu dari status React, dan menangani peristiwa.
Pengambilan Inti
Instal paket exodeui, render file dengan <ExodeUICanvas>, dan dapatkan mesin dengan hook useExodeUI dengan meneruskan setEngine ke onReady. Kemudian panggil setInputBool, setInputNumber, atau fireTrigger dari efek dan penangan React untuk menggerakkan mesin status, dan dengarkan peristiwa dengan onTrigger. Status React Anda tetap menjadi sumber kebenaran; file tersebut memiliki mosi.
Model: kode Anda memiliki data, file memiliki gerakan
File ExodeUI berisi lapisan, status, transisi, dan input yang beralih di antara lapisan tersebut. Komponen React Anda memutuskan kapan input tersebut berubah, berdasarkan statusnya sendiri. Pemisahan itu membuat kode animasi tidak masuk ke komponen Anda dan memungkinkan desainer mengubah gerakan tanpa menyentuh React.
Pengaturan
Instal runtime React dengan npm instal exodeui. Jika Anda menggunakan Vite, tambahkan exodePlugin() dari exodeui/vite-plugin ke konfigurasi Vite Anda sehingga file .exode dapat diimpor secara langsung; jika tidak, berikan URL ke file dengan prop src.
- Alat peraga ExodeUICanvas: src (URL) atau artboard (data yang diimpor), fit, penyelarasan, autoPlay, onReady, onTrigger, onInputUpdate.
- useExodeUI mengembalikan setEngine plus setInputBool, setInputNumber, setInputText, setInputNumberArray, setInputStringArray, fireTrigger, dan getInputValue.
- Nama masukan harus sesuai dengan nama yang ditentukan dalam file.
Boolean, angka dan pemicu
Gunakan boolean untuk keadaan yang tetap aktif, seperti Loading. Gunakan angka untuk nilai berkelanjutan, seperti kemajuan dari 0 hingga 100. Gunakan pemicu untuk momen yang terjadi satu kali saja, misalnya Sukses, yang diaktifkan sekali dan direset. Di React, atur boolean dan angka dalam efek yang bergantung pada status, dan aktifkan pemicu di handler tempat peristiwa tersebut terjadi.
Acara kembali ke React
Animasi juga dapat memberi tahu kode Anda bahwa sesuatu telah terjadi, misalnya tombol di dalam file ditekan atau animasi sukses selesai. Tangani ini dengan onTrigger, yang menerima nama pemicu, dan pertahankan pekerjaan sebenarnya, seperti panggilan API, dalam kode React Anda.
Pengujian dan aksesibilitas
Karena gerakan didorong oleh masukan, Anda dapat menguji sisi React dengan memeriksa masukan mana yang disetel untuk setiap keadaan. Simpan tombol dan label asli di DOM, atau gunakan komponen ExodeSEO, yang dapat menghasilkan lapisan HTML yang tersembunyi secara visual untuk pembaca layar. Berikan boolean gerakan tereduksi dari pengaturan sistem pengguna jika file Anda mendefinisikannya.
Cuplikan Implementasi Produksi
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>
);
}Kunci Principles untuk Diingat
- Render dengan ExodeUICanvas dan teruskan setEngine dari useExodeUI ke onReady
- Boolean untuk status yang sedang berlangsung, angka untuk nilai yang berkelanjutan, pemicu momen
- Atur input dari efek dan penangan React; Status React tetap menjadi sumber kebenaran
- Tangani kejadian dari file dengan onTrigger
- Pertahankan logika aplikasi di React, gerakan di file
Pertanyaan yang Sering Diajukan
Sumber
- exodeui (React runtime) — npm