reelkitReelKit

React गाइड

@reelkit/react से स्लाइडर बनाना सीखें।

टच सबसे पहले
momentum और snap के साथ स्वाइप
कीबोर्ड नेविगेशन
तीर वाली कुंजियाँ + Escape
व्हील स्क्रॉल
वैकल्पिक, debounce के साथ
वर्चुअलाइज़्ड
10,000+ आइटम, DOM में 3
इंडिकेटर
Instagram जैसे खिसकते बिंदु
प्रोग्राम से API
ref के ज़रिए next(), prev(), goTo()
लूप मोड
अनंत गोल नेविगेशन
दिशा
वर्टिकल या हॉरिज़ॉन्टल
बिना दोबारा रेंडर
signal पर आधारित स्टेट अपडेट

Reel कंपोनेंट

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

tsx

अपने-आप साइज़

size prop वैकल्पिक है। इसे छोड़ने पर Reel ResizeObserver से अपना कंटेनर खुद नापता है और CSS से तय लेआउट के हिसाब से ढल जाता है। कंटेनर का साइज़ उसके parent से तय होना चाहिए (जैसे flex, grid या तय CSS आकार)।

tsx

itemBuilder पैटर्न

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

tsx

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

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

URL स्टेट

useOverlayUrlState किसी overlay के लिए URL-स्टेट कंट्रोलर बनाकर पूरा लौटाता है, फिर आप उसे किसी *UrlOverlay को उसके controller prop के रूप में देते हैं। खुले होने की स्टेट URL के पास है, इसलिए जुड़ा हुआ overlay खुद खुलता है और आम तौर पर लिंक ही उसे खोलता है। न मौजूद parameter का पहला write history में एक entry जोड़ता है और उसके बाद हर write उसे बदल देता है, इसलिए पेज बदलना back बटन को कभी दबाता नहीं। value/position पढ़ने और प्रोग्राम से चलाने के लिए कंट्रोलर रखें: set(position) खोलता है, set(null) बंद करता है, और set वही निचले स्तर का write है जो overlay स्लाइड बदलने पर अंदर से करता है।

tsx

विकल्पों का object param, codec और locator (तीनों ज़रूरी) लेता है, साथ में वैकल्पिक adapter। param और adapter पहले रेंडर पर पढ़े जाते हैं और उसके बाद तय रहते हैं — बदलने के लिए दोबारा mount करें — जबकि codec और locator हर बार ताज़ा पढ़े जाते हैं, इसलिए सूची बढ़ने या क्रम बदलने के बाद की खोज मौजूदा सूची देखती है। codec और locator एक ही Id साझा करने वाली मेल खाती जोड़ी हैं, इसलिए साथ चलते हैं — साधारण ?photo=3 गैलरी के लिए ...urlIndexKey(() => images.length) spread करें, जो दोनों हिस्से एक साथ लौटाता है। urlIndexKey parameter को स्लाइड index से जोड़ता है और उसे getter की लौटाई मौजूदा गिनती तक सीमित रखता है, इसलिए पुराना या सीमा से बाहर का ?photo=99 ठुकराया जाता है और कभी नाम न ली गई स्लाइड खोलने के बजाय URL से अपने-आप हट जाता है। संख्या नहीं, getter पास करें, ताकि पेज वाली फ़ीड बढ़ने पर भी सीमा सही रहे। यह createIndexLocator (locator वाला हिस्सा) को लपेटकर indexCodec के साथ जोड़ता है। पेज वाली फ़ीड या पहचान से key होने वाली गैलरी इसकी जगह अपनी मेल खाती codec + locator जोड़ी देती है। विकल्पों की पूरी तालिका React API रेफ़रेंस में है।

ReelIndicator

एक वैकल्पिक कंपोनेंट, जो Instagram जैसे प्रोग्रेस इंडिकेटर दिखाता है कि आप स्लाइडर में अभी किस जगह पर हैं। Reel के अंदर रखने पर यह context के ज़रिए parent की count और active values से अपने-आप जुड़ जाता है — हाथ से स्टेट जोड़ने की ज़रूरत नहीं।

tsx

लाइव डेमो: बुनियादी स्लाइडर

टच/स्वाइप
momentum के साथ
कीबोर्ड
तीर वाली कुंजियाँ + Escape
इंडिकेटर
Instagram जैसे
नेविगेशन
apiRef के ज़रिए
BasicSlider.tsx

आज़माकर देखें — स्लाइडों के बीच जाने के लिए बटन दबाएँ।

मुख्य बातें

  • size prop

    वैकल्पिक [width, height] tuple, या CSS से अपने-आप साइज़ के लिए छोड़ दें

  • itemBuilder

    index लेता है और स्लाइड का कंटेंट लौटाता है

  • apiRef

    नेविगेशन के लिए कंट्रोलर के मेथड तक पहुँच

  • afterChange

    UI अपडेट के लिए मौजूदा index पर नज़र रखें

लाइव डेमो: अनंत सूची

reelkit किसी भी समय DOM में सिर्फ़ 3 स्लाइड रेंडर करता है (मौजूदा, पिछली, अगली)। इससे 10,000+ आइटम वाली सूचियाँ भी आराम से स्क्रॉल होती हैं।

DOM में 3 आइटम
सिर्फ़ दिखने वाली स्लाइड रेंडर होती हैं
10,000+ आइटम
किसी भी पैमाने पर कोई अटकन नहीं
स्थिर मेमोरी
गिनती कुछ भी हो, वही 3 DOM नोड
goTo(n)
किसी भी index पर तुरंत जाएँ
InfiniteList.tsx

10,000 आइटम — DOM में सिर्फ़ 3। जाने के लिए बटन इस्तेमाल करें या कोई संख्या लिखें।

लाइव डेमो: बढ़ने वाली सूची

ऐसी अनंत फ़ीड का नमूना जिसमें आइटम ज़रूरत पड़ने पर लोड होते हैं — ठीक TikTok या Instagram की तरह। 20 आइटम से शुरू करें, आख़िर के पास स्क्रॉल करें, और देखें कि नए बैच अपने-आप आ जाते हैं।

बदलती गिनती
स्क्रॉल करते ही आइटम लोड होते हैं
बैच में लोडिंग
हर बैच में 20 आइटम
वर्चुअलाइज़्ड
अब भी DOM में सिर्फ़ 3
अपने-आप इंडिकेटर
कंटेंट के साथ बिंदु बढ़ते हैं
GrowableList.tsx
1 / 20 (growing)

आख़िर तक स्क्रॉल करें — नए आइटम अपने-आप लोड होते हैं। बैच आने के साथ काउंटर और इंडिकेटर बढ़ते हैं।

परफ़ॉर्मेंस टिप्स

  • डेटा arrays को memoize करें

    अपने आइटम के array को useMemo में लपेटें। हर रेंडर पर नया array reference count अपडेट करवाता है और दिखने वाली ranges दोबारा निकलवाता है।

  • itemBuilder को हल्का रखें

    यह दिखने वाली range के हर बदलाव पर चलता है (आम तौर पर 3 स्लाइड)। इसके अंदर भारी गणना या side effects से बचें।

  • किनारे के पास डेटा लोड करें

    afterChange से पहचानें कि यूज़र आख़िर के पास पहुँच रहा है, और स्लाइड ख़त्म होने से पहले अगला बैच fetch करें (ऊपर बढ़ने वाली सूची का डेमो देखें)।

  • स्क्रॉल होने वाले पेज में व्हील बंद करें

    जब स्लाइडर स्क्रॉल होने वाले लेआउट के अंदर हो, तो पेज का स्क्रॉल पकड़ने से बचने के लिए enableWheel={false} सेट करें।

अगले कदम