Kkwaenggwari · ओपन सोर्स

छोटे बनवलेले.मोठ्याने वाजते.

React आणि React Native साठी ओपन-सोर्स स्टेट आणि मोशन साधने. पहिल्या import पासून चालणारी आणि तुम्हाला लागेल तितकीच वाढणारी तीन केंद्रित पॅकेजेस.

  • 3 पॅकेजेस
  • React · React Native
  • TypeScript घोषणा
  • ISC परवाना

गोंग दाबा. प्रत्येक साधन त्या नादाला स्वतःच्या पद्धतीने उत्तर देते.

01 · साधने

तीन वाद्ये.एक ताल.

प्रत्येक साधन एकच काम सुरुवातीपासून शेवटपर्यंत करते. स्वतंत्र वापरा, किंवा एकत्र — ती एकमेकांशी जुळण्यासाठीच बनवली आहेत.

restate

स्टेटReact + React Native

एका हुकने सामायिक करा.तुम्ही ठरवाल तेव्हा सेव्ह करा.

Provider, action किंवा reducer शिवाय कंपोनंट एकच मूल्य वाचतात. त्यांची निवड बदलली तरच ते पुन्हा रेंडर होतात, आणि सेव्ह किंवा पुनर्संचयित करणे तुम्ही सांगाल तेव्हाच होते.

  • Provider शिवाय सामायिक
  • तुम्ही निवडलेल्या भागालाच सबस्क्राइब
  • IndexedDB किंवा MMKV मध्ये स्पष्ट सेव्ह
इन्स्टॉल करा
npm install @kkwaenggwari/restate

थेट

दोन कंपोनंट, एक स्टोअर

कोणत्याही बाजूचे बटण दाबा. दोन्ही पॅनेल एकच restate() मूल्य वाचतात आणि एकत्र बदलतात; शिपिंग बॅज फक्त एक निवड ऐकतो.

हेडर

2 कार्टमध्ये

उत्पादन सूची

2 कार्टमध्ये

Animated

मोशन इंजिनReact DOM

एक मूल्यसंपूर्ण स्क्रीनचे संचालन करते.

React Native Animated मधून तुम्हाला माहीत असलेले timing, spring आणि interpolate React DOM वर वापरा. एक मूल्य प्रत्येक फ्रेममध्ये React रेंडर न करता अनेक एलिमेंट्सची शैली चालवते.

  • तुम्हाला माहीत असलेले React Native Animated API
  • व्यत्ययात स्थिती आणि वेग टिकून राहतात
  • मालक गेल्यावर स्वतः स्वच्छता करते
इन्स्टॉल करा
npm install @kkwaenggwari/animated

थेट

एक Value, बारा आकार

स्लायडर एकच Value बदलतो. बारा आकारांची स्थिती, फिरणे, आकारमान आणि कोपरे सर्व त्यातूनच येतात. spring दाबा, मग मध्येच स्लायडर पकडा.

Animated Chorus

तयार कंपोनंटReact · React Native

अवघड इंटरॅक्शन,आधीच पूर्ण.

घरंगळणारे आकडे, प्रवास करणारा हायलाइट, फक्त बदललेले हलवणाऱ्या सूची, शीट्स आणि स्वाइप क्रिया. तुमचा डेटा द्या — Provider किंवा सेटअप कॉल नाही — React आणि React Native वर.

  • आकडे, टॅब, सूची आणि शीट्स
  • वेब आणि नेटिव्हवर एकच import
  • नवीन इनपुट स्क्रीनवर दिसणाऱ्यापासून पुढे जाते
इन्स्टॉल करा
npm install @kkwaenggwari/animated-chorus @kkwaenggwari/animated

थेट

फक्त डेटा लागणारा डॅशबोर्ड

कालावधी निवडा: MotionHighlight तिथे जातो, MotionNumber घरंगळतो, ProgressRing भरतो आणि MotionList फक्त बदललेल्या ओळी हलवतो.

आजहा आठवडाहा महिना

भेटी

1,284

  1. मुख्य पान
  2. किंमती
  3. दस्तऐवज
  4. ब्लॉग

नमुना डेटा

02 · समूह

एक ठोका.सर्व काही हलते.

हा मंच Animated ने बनवला आहे. तुमची स्क्रोल प्रगती धरणारे एकच Value 48 आकारांची स्थिती, फिरणे, स्केल आणि अपारदर्शकता एकाच वेळी चालवते.

  1. 01
    नाद

    विखुरलेले बिंदू गोंगच्या वर्तुळांमध्ये एकत्र येतात.

  2. 02
    विभाजन

    वर्तुळ तीन भागांत विभागून प्रत्येक साधनाचा रंग घेते.

  3. 03
    आकार

    ते स्टेटचे दुवे, मोशनचा मार्ग आणि कोरसचे स्तंभ बनतात.

  4. 04
    ताल

    सर्व काही रांगेत येऊन एकाच तालावर उतरते.

progress1.00

03 · तत्त्वे

छोटे,सुरुवातीपासून शेवटपर्यंत.

एका import ने सुरुवात करा

आधीच गुंडाळणारा Provider किंवा जागतिक सेटअप नाही. तुमच्या ॲपला गरज लागेल तेव्हाच क्षमता जोडा.

फक्त गरजेचे

फक्त निवड बदललेले कंपोनंट, मूल्य वापरणारे एलिमेंट्स आणि हललेल्या ओळीच अद्ययावत होतात.

शेवटपर्यंत जबाबदार

व्यत्यय आलेले मोशन स्क्रीनवर दिसणाऱ्यापासून पुढे जाते, आणि मालक गेल्यावर सबस्क्रिप्शन्स व ॲनिमेशन्स मोकळे होतात.

टाइप्स आणि दस्तऐवजांसह

प्रत्येक पॅकेज TypeScript घोषणांसह येते, आणि दस्तऐवज 39 भाषांमध्ये वाचता येतात.

04 · नाव

Kkwaenggwari,वाद्यवृंदाची सुरुवात करणारा गोंग.

याचा उच्चार "क्वेंग-ग्वा-री" असा करा. कोरियन फुंगमुलमध्ये, आघाडीचा kkwaenggwari (꽹과리) वादक संपूर्ण समूहाचा ताल ठरवतो. आमच्या साधनांचे ध्येयही तेच: छोटी पण स्पष्ट, जेणेकरून तुमचे संपूर्ण ॲप एकाच तालावर चालेल.

kkwaenggwariKkwaenggwari हे नाव kkwaenggwari (꽹과리) वरून आले आहे — हातोडीने वाजवला जाणारा एक छोटा कोरियन गोंग. त्याच्या तेजस्वी, स्पष्ट नादावरून या छोट्या ओपन-सोर्स साधनांना हे नाव मिळाले.