reelkitReelKit

शुरुआत

reelkit एक सिंगल-आइटम स्लाइडर है — TikTok, Instagram Reels या Stories की तरह एक समय में एक ही आइटम दिखता है। यह वर्टिकल वीडियो फ़ीड, फ़ुलस्क्रीन गैलरी और स्वाइप करने वाले कंटेंट के लिए बढ़िया है।

ReelKit पसंद आ रहा है?

अगर ReelKit आपके काम आया है, तो GitHub पर star देने के बारे में ज़रूर सोचें। इससे दूसरे डेवलपर इस प्रोजेक्ट को ढूँढ पाते हैं और इसका काम आगे बढ़ता रहता है। धन्यवाद, आपके साथ के लिए मैं सच में आभारी हूँ!

0.x.x — अस्थिर API

ReelKit पर अभी सक्रिय रूप से काम चल रहा है। 0.x.x के दौरान API बिना deprecation अवधि के minor वर्ज़न के बीच बदल सकते हैं। अचानक टूट-फूट से बचने के लिए अपना वर्ज़न पिन कर लें।

अपना फ़्रेमवर्क चुनें

ऑनलाइन आज़माएँ

ब्राउज़र में ही आज़माएँ, कुछ भी इंस्टॉल करने की ज़रूरत नहीं:

क्विक स्टार्ट

React के साथ सबसे छोटा वर्टिकल स्लाइडर:

tsx

क्विक स्टार्ट

Angular के साथ सबसे छोटा वर्टिकल स्लाइडर:

typescript

क्विक स्टार्ट

Vue के साथ सबसे छोटा वर्टिकल स्लाइडर:

vue

मुख्य कॉन्सेप्ट

Reel

Reel कंपोनेंट मुख्य कंटेनर है। यह स्लाइडर की स्टेट संभालता है और टच जेस्चर, कीबोर्ड नेविगेशन और एनिमेशन को हैंडल करता है। स्लाइड रेंडर करने के लिए यह itemBuilder के ज़रिए render prop पैटर्न का इस्तेमाल करता है।

itemBuilder

itemBuilder prop एक फ़ंक्शन है जो index लेता है और हर स्लाइड का कंटेंट लौटाता है। इसी पैटर्न से वर्चुअलाइज़ेशन संभव होता है — सिर्फ़ दिखने वाले आइटम ही रेंडर होते हैं।

ReelIndicator

एक वैकल्पिक कंपोनेंट, जो Instagram जैसे प्रोग्रेस इंडिकेटर दिखाता है कि आप स्लाइडर में अभी किस जगह पर हैं।

tsx
html
vue-html

नेविगेशन के बिल्ट-इन तरीके:

  • टच/स्वाइप: momentum और snap के साथ खींचकर आगे-पीछे जाएँ
  • कीबोर्ड: तीर वाली कुंजियाँ (overlay कंपोनेंट बंद करने के लिए Escape भी संभालते हैं)
  • माउस व्हील: enableWheel prop से चालू करें
  • प्रोग्राम से: next(), prev(), goTo() के लिए apiRef इस्तेमाल करें
tsx
html
vue

अगले कदम