Kkwaenggwari · Open source

आकार में छोटा।गूँज में बड़ा।

React और React Native के लिए स्टेट और गति के ओपन-सोर्स टूल। तीन केंद्रित पैकेज, जो पहले इम्पोर्ट से काम करते हैं और उतना ही बढ़ते हैं जितनी आपको ज़रूरत हो।

  • 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 बदलता है। बारहों आकृतियों की स्थिति, घुमाव, आकार और कोने उसी से निकलते हैं। स्प्रिंग दबाएँ, फिर गति के बीच में स्लाइडर पकड़ लें।

Animated Chorus

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

मुश्किल इंटरैक्शन,पहले से तैयार।

घूमते अंक, चलती हुई हाइलाइट, सिर्फ़ बदले हुए हिस्से को हिलाने वाली सूचियाँ, शीट और स्वाइप एक्शन। अपना डेटा दें — न provider, न सेटअप कॉल — React और React Native पर।

  • अंक, टैब, सूचियाँ और शीट
  • वेब और नेटिव पर एक ही इम्पोर्ट
  • नया इनपुट स्क्रीन पर दिख रही स्थिति से आगे बढ़ता है
इंस्टॉल करें
npm install @kkwaenggwari/animated-chorus @kkwaenggwari/animated

लाइव

डैशबोर्ड, जिसे बस डेटा चाहिए

कोई अवधि चुनें: MotionHighlight उस तक जाता है, MotionNumber घूमता है, ProgressRing भरता है और MotionList सिर्फ़ बदली हुई पंक्तियाँ हिलाता है।

आजइस हफ़्तेइस महीने

विज़िट

1,284

  1. होम
  2. कीमतें
  3. Docs
  4. ब्लॉग

नमूना डेटा

02 · समूह

एक चोट।सब कुछ हिलता है।

यह मंच Animated से बना है। आपकी स्क्रॉल प्रगति रखने वाला एक ही Value एक साथ 48 आकृतियों की स्थिति, घुमाव, पैमाना और अपारदर्शिता का संचालन करता है।

  1. 01
    गूँज

    बिखरे बिंदु घड़ियाल के छल्लों में इकट्ठा होते हैं।

  2. 02
    बँटवारा

    छल्ला तीन हिस्सों में बँटता है और हर टूल का रंग लेता है।

  3. 03
    आकार

    वे स्टेट की कड़ियाँ, गति का पथ और कोरस के स्तंभ बन जाते हैं।

  4. 04
    ताल

    सब कुछ एक पंक्ति में आकर एक ही ताल पर पड़ता है।

progress1.00

03 · सिद्धांत

छोटा,शुरू से अंत तक।

एक इम्पोर्ट से शुरू करें

पहले से कोई लपेटने वाला provider या ग्लोबल सेटअप नहीं। क्षमताएँ तभी जोड़ें जब आपका ऐप उन्हें माँगे।

सिर्फ़ जहाँ ज़रूरत हो

सिर्फ़ वे कंपोनेंट अपडेट होते हैं जिनका चुना हुआ हिस्सा बदला, वे एलिमेंट जो मान इस्तेमाल करते हैं, और वे पंक्तियाँ जो हिलीं।

अंत तक ज़िम्मेदार

रुकी हुई गति स्क्रीन पर दिख रही स्थिति से आगे बढ़ती है, और मालिक के हटते ही सदस्यताएँ और एनिमेशन छोड़ दिए जाते हैं।

टाइप्ड और दस्तावेज़ित

हर पैकेज के साथ TypeScript डिक्लेरेशन आते हैं, और दस्तावेज़ 39 भाषाओं में पढ़े जा सकते हैं।

04 · नाम

Kkwaenggwari,वह घड़ियाल जो दल की शुरुआत करता है।

इसे "क्वेंग-ग्वा-री" बोलें। कोरियाई फुंगमुल में मुख्य kkwaenggwari (꽹과리) वादक पूरे दल की ताल तय करता है। हमारे टूल का लक्ष्य भी यही है: छोटे, पर साफ़, ताकि आपका पूरा ऐप एक ताल पर चले।

kkwaenggwariKkwaenggwari का नाम kkwaenggwari (꽹과리) से आया है, जो हथौड़ी से बजाया जाने वाला एक छोटा कोरियाई घड़ियाल है। इसकी चमकीली, साफ़ गूँज ने इन छोटे ओपन-सोर्स टूल को यह नाम दिया।