React स्टेट से ExodeUI स्टेट मशीन इनपुट को नियंत्रित करना
exodeui पैकेज के साथ React में ExodeUI फ़ाइल चलाने के लिए एक व्यावहारिक मार्गदर्शिका: React स्थिति से बूलियन, संख्या और ट्रिगर इनपुट सेट करना, और घटनाओं को संभालना।
कोर टेकअवे
exodeui पैकेज स्थापित करें, फ़ाइल को <ExodeUICanvas> के साथ प्रस्तुत करें, और setEngine को onReady पर पास करके उपयोगExodeUI हुक के साथ इंजन प्राप्त करें। फिर स्टेट मशीन को चलाने के लिए React इफेक्ट्स और हैंडलर से setInputBool, setInputNumber या fireTrigger को कॉल करें, और onTrigger के साथ इवेंट सुनें। आपका React राज्य सत्य का स्रोत बना हुआ है; फ़ाइल प्रस्ताव का स्वामी है.
मॉडल: आपका कोड डेटा का स्वामी है, फ़ाइल गति का स्वामी है
एक ExodeUI फ़ाइल में परतें, स्थितियाँ, संक्रमण और उनके बीच स्विच करने वाले इनपुट होते हैं। आपका React घटक अपनी स्थिति के आधार पर यह निर्णय लेता है कि वे इनपुट कब बदलते हैं। वह विभाजन एनीमेशन कोड को आपके घटकों से दूर रखता है और डिजाइनरों को React को छुए बिना गति बदलने देता है।
स्थापित करना
React रनटाइम को npm के साथ इंस्टॉल करें exodeui इंस्टॉल करें। यदि आप Vite का उपयोग करते हैं, तो exodeui/vite-plugin से exodePlugin() को अपने Vite कॉन्फ़िगरेशन में जोड़ें ताकि .exode फ़ाइलें सीधे आयात की जा सकें; अन्यथा src प्रोप के साथ फ़ाइल में एक URL पास करें।
- ExodeUICanvas प्रॉप्स: src (URL) या आर्टबोर्ड (आयातित डेटा), फिट, एलाइनमेंट, ऑटोप्ले, ऑनरेडी, ऑनट्रिगर, ऑनइनपुटअपडेट।
- उपयोगExodeUI सेटइंजन प्लस सेटइनपुटबूल, सेटइनपुटनंबर, सेटइनपुटटेक्स्ट, सेटइनपुटनंबरएरे, सेटइनपुटस्ट्रिंगएरे, फायरट्रिगर और गेटइनपुटवैल्यू लौटाता है।
- इनपुट नाम फ़ाइल में परिभाषित नामों से मेल खाने चाहिए।
बूलियन्स, संख्याएँ और ट्रिगर्स
ऐसी स्थिति के लिए बूलियन का उपयोग करें जो चालू रहती है, जैसे लोड हो रहा है। निरंतर मानों के लिए किसी संख्या का उपयोग करें, जैसे 0 से 100 तक की प्रगति। एक बार के लिए ट्रिगर का उपयोग करें, जैसे सफलता, जो एक बार सक्रिय होता है और रीसेट हो जाता है। React में, बूलियन और संख्याओं को ऐसे प्रभाव में सेट करें जो स्थिति पर निर्भर करता है, और हैंडलर में ट्रिगर ट्रिगर करता है जहां घटना होती है।
घटनाक्रम React पर वापस
एनिमेशन आपके कोड को यह भी बता सकते हैं कि कुछ हुआ है, उदाहरण के लिए फ़ाइल के अंदर एक बटन दबाया गया था या एक सफल एनीमेशन समाप्त हो गया था। इन्हें ऑनट्रिगर के साथ संभालें, जो ट्रिगर नाम प्राप्त करता है, और वास्तविक कार्य, जैसे एपीआई कॉल, को अपने React कोड में रखें।
परीक्षण और पहुंच
क्योंकि गति इनपुट द्वारा संचालित होती है, आप यह जांच कर React पक्ष का परीक्षण कर सकते हैं कि प्रत्येक राज्य के लिए कौन से इनपुट सेट हैं। DOM में वास्तविक बटन और लेबल रखें, या ExodeSEO घटक का उपयोग करें, जो स्क्रीन रीडर के लिए एक दृश्यमान छिपी हुई HTML परत उत्पन्न कर सकता है। यदि आपकी फ़ाइल एक को परिभाषित करती है तो उपयोगकर्ता की सिस्टम सेटिंग से एक कम गति वाला बूलियन पास करें।
उत्पादन कार्यान्वयन स्निपेट
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>
);
}याद रखने योग्य कुंजी Principle
- ExodeUICanvas के साथ रेंडर करें और setEngine को useExodeUI से onReady तक पास करें
- चालू अवस्थाओं के लिए बूलियन, निरंतर मानों के लिए संख्याएँ, क्षणों के लिए ट्रिगर
- React प्रभाव और हैंडलर से इनपुट सेट करें; React राज्य सत्य का स्रोत बना हुआ है
- ऑनट्रिगर के साथ फ़ाइल से ईवेंट को संभालें
- ऐप लॉजिक को React में रखें, फ़ाइल में मोशन रखें
अक्सर पूछे जाने वाले प्रश्नों
स्रोत
- exodeui (React runtime) — npm