ReelKit

TikTok/Instagram Reels जैसे अनुभव के लिए सिंगल-आइटम स्लाइडर

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

React

Angular

Vue

शुरू करें Star on GitHub

Virtualized

Only 3 slides in DOM

लाइव डेमो — तीरों से चलाएँ

यह कैसे काम करता है

पूरी फ़ीड।
सिर्फ़ तीन स्लाइड।

आपकी फ़ीड में हज़ारों आइटम हो सकते हैं। Reel सिर्फ़ मौजूदा स्लाइड और उसके ठीक अगल-बगल वाले को ही माउंट रखता है।

1
अगली स्वाइप तैयार रखना
मौजूदा स्लाइड पूरी स्क्रीन घेरती है। एक पड़ोसी ऊपर इंतज़ार करता है, दूसरा नीचे।
2
फ़ीड में चलना
अगले आइटम के लिए ऊपर स्वाइप करें, पिछले के लिए नीचे। माउंट की गई स्लाइड एक साथ चलती हैं।
3
सिर्फ़ बदला हुआ हिस्सा अपडेट करना
स्लाइड के थमते ही, दायरे से बाहर गया आइटम हटा दिया जाता है और नया पड़ोसी माउंट हो जाता है। जो दायरे में बने रहे, वे अपनी जगह रहते हैं।

बिना लूप वाली फ़ीड के दोनों सिरों पर दो ही स्लाइड काफ़ी हैं। डेमो के किनारे तक पहुँचने पर माउंट की गिनती बदलते देखें।

9 items in the feed3 mounted

VIEWPORT

PreviousOffscreen

CurrentVisible

NextOffscreen

Slide 3 of 9

In the DOM: 2, 3, 4

Expanded view · Neighbors are hidden in the actual slider

परफ़ॉर्मेंस के लिए बना

वर्चुअलाइज़्ड रेंडरिंग, कोई dependency नहीं, 60 fps ट्रांज़िशन

3DOM में

वर्चुअलाइज़्ड

10,000+ आइटम संभालता है। किसी भी समय सिर्फ़ 3 स्लाइड रेंडर होती हैं।

0dependency

कोई dependency नहीं

कोई runtime dependency नहीं। gzip के बाद core लगभग 11.2 kB का है।

60fps

टच सबसे पहले

momentum और snap points के साथ असली जैसे स्वाइप जेस्चर।

तेज़ परफ़ॉर्मेंस

कीबोर्ड नेविगेशन

फ़्रेमवर्क से स्वतंत्र

TypeScript सबसे पहले

Headless + styled

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

शेयर होने वाली URL स्टेट

"ReelKit" ही क्यों?

Reel — Instagram Reels और TikTok जैसी वर्टिकल वीडियो फ़ीड। एक समय में एक कंटेंट, आगे बढ़ने के लिए स्वाइप करें।

Kit — पैकेज का एक modular सेट। पूरे नियंत्रण के लिए headless core, जल्दी सेटअप के लिए फ़्रेमवर्क bindings, या वीडियो प्लेयर और इमेज गैलरी के लिए तैयार overlays इस्तेमाल करें।

आसान API

बस कुछ लाइन के कोड से शुरू करें

tsx

import { Reel, ReelIndicator } from '@reelkit/react';

const items = ['Slide 1', 'Slide 2', 'Slide 3'];

function App() {
  return (
    <Reel
      count={items.length}
      size={[400, 600]}
      itemBuilder={(index) => (
        <div className="slide">{items[index]}</div>
      )}
    >
      <ReelIndicator />
    </Reel>
  );
}