reelkitReelKit

इंस्टॉलेशन

reelkit के पैकेज इंस्टॉल करें और अपना प्रोजेक्ट कॉन्फ़िगर करें।

पैकेज के विकल्प

सिर्फ़ वही इंस्टॉल करें जो आप इस्तेमाल करते हैं:

पैकेजविवरणकहाँ काम आता है
@reelkit/coreफ़्रेमवर्क से स्वतंत्र coreकस्टम इंटीग्रेशन
@reelkit/stories-coreफ़्रेमवर्क से स्वतंत्र stories इंजनstories के कस्टम इंटीग्रेशन
@reelkit/reactReact कंपोनेंटReact 18+ ऐप्लिकेशन
@reelkit/react-reel-playerफ़ुलस्क्रीन वर्टिकल reel प्लेयरInstagram/TikTok जैसा प्लेयर
@reelkit/react-lightboxइमेज गैलरी lightboxफ़ुलस्क्रीन इमेज प्रीव्यू
@reelkit/react-stories-playerInstagram जैसा stories प्लेयरअपने-आप आगे बढ़ने और जेस्चर वाली stories
@reelkit/angularAngular standalone कंपोनेंटAngular 19+ ऐप्लिकेशन
@reelkit/angular-reel-playerफ़ुलस्क्रीन वर्टिकल reel प्लेयरInstagram/TikTok जैसा प्लेयर
@reelkit/angular-lightboxइमेज गैलरी lightboxफ़ुलस्क्रीन इमेज प्रीव्यू
@reelkit/angular-stories-playerInstagram जैसा stories प्लेयरअपने-आप आगे बढ़ने और जेस्चर वाली stories
@reelkit/vueVue 3 कंपोनेंट और composablesVue 3 ऐप्लिकेशन
@reelkit/vue-reel-playerफ़ुलस्क्रीन वर्टिकल reel प्लेयरInstagram/TikTok जैसा प्लेयर
@reelkit/vue-lightboxइमेज गैलरी lightboxफ़ुलस्क्रीन इमेज प्रीव्यू
@reelkit/vue-stories-playerInstagram जैसा stories प्लेयरअपने-आप आगे बढ़ने और जेस्चर वाली stories

बंडल साइज़

सभी पैकेज इस तरह ऑप्टिमाइज़ किए गए हैं कि बंडल पर कम से कम असर पड़े:

पैकेजJSJS (gzip)CSSCSS (gzip)
@reelkit/core29.8 kB11.2 kB--
@reelkit/react13.8 kB4.9 kB--
@reelkit/react-reel-player17.1 kB5.4 kB9.7 kB2.1 kB
@reelkit/react-lightbox12.7 kB4.1 kB7.9 kB1.6 kB
@reelkit/react-stories-player25.3 kB7.5 kB9.9 kB2.1 kB
@reelkit/angular70.2 kB15.8 kB--
@reelkit/angular-reel-player148.1 kB24.4 kB15.0 kB3.5 kB
@reelkit/angular-lightbox113.6 kB19.1 kB10.2 kB2.2 kB
@reelkit/vue15.3 kB5.2 kB--
@reelkit/vue-reel-player21.0 kB6.2 kB9.7 kB2.1 kB
@reelkit/vue-lightbox18.2 kB4.9 kB7.0 kB1.4 kB
@reelkit/vue-stories-player25.4 kB7.9 kB9.9 kB2.1 kB

दूसरी लाइब्रेरी से तुलना

ReelKit किसी भी समय DOM में सिर्फ़ 3 स्लाइड रेंडर करता है और 10,000+ आइटम संभाल लेता है। दूसरी carousel लाइब्रेरी सारी स्लाइड रेंडर करती हैं, इसलिए बड़ी सूचियों पर अटक जाती हैं।

लाइब्रेरीJS (gzip)वर्चुअलाइज़ेशनटिप्पणी
ReelKit (core + react)16.1 kBकोई dependency नहीं
ReelKit (core + angular)27.0 kBकोई dependency नहीं
ReelKit (core + vue)16.4 kBकोई dependency नहीं
Swiper~25 kBप्लगइनपूरा बंडल; tree-shaking संभव
Embla Carousel~7 kB✗हल्का, प्लगइन पर आधारित
keen-slider~6 kB✗कोई dependency नहीं

npm

bash
npm install @reelkit/react

yarn

bash
yarn add @reelkit/react

pnpm

bash
pnpm add @reelkit/react

npm

bash
npm install @reelkit/angular

yarn

bash
yarn add @reelkit/angular

pnpm

bash
pnpm add @reelkit/angular

npm

bash
npm install @reelkit/vue

yarn

bash
yarn add @reelkit/vue

pnpm

bash
pnpm add @reelkit/vue

Peer dependencies

फ़्रेमवर्क पैकेज की peer dependencies हैं, जो आपके प्रोजेक्ट में पहले से होनी चाहिए:

@reelkit/react

  • react >= 18.0.0
  • react-dom >= 18.0.0

@reelkit/react-reel-player

  • @reelkit/react
  • react >= 18.0.0
  • react-dom >= 18.0.0
  • lucide-react >= 0.400.0

@reelkit/react-lightbox

  • @reelkit/react
  • react >= 18.0.0
  • react-dom >= 18.0.0
  • lucide-react >= 0.400.0

@reelkit/react-stories-player

  • @reelkit/react
  • react >= 18.0.0
  • react-dom >= 18.0.0
  • lucide-react >= 0.400.0

@reelkit/angular

  • @angular/core >= 19.0.0
  • @angular/common >= 19.0.0

@reelkit/angular-reel-player

  • @reelkit/angular
  • @angular/core >= 19.0.0
  • @angular/common >= 19.0.0
  • lucide-angular >= 0.460.0

@reelkit/angular-lightbox

  • @reelkit/angular
  • @angular/core >= 19.0.0
  • @angular/common >= 19.0.0
  • lucide-angular >= 0.460.0

@reelkit/angular-stories-player

  • @reelkit/angular
  • @angular/core >= 19.0.0
  • @angular/common >= 19.0.0
  • lucide-angular >= 0.460.0

@reelkit/vue

  • vue >= 3.0.0

@reelkit/vue-reel-player

  • @reelkit/vue
  • vue >= 3.3.0
  • lucide-vue-next >= 0.400.0

@reelkit/vue-lightbox

  • @reelkit/vue
  • vue >= 3.0.0
  • lucide-vue-next >= 0.400.0

@reelkit/vue-stories-player

  • @reelkit/vue
  • vue >= 3.3.0
  • lucide-vue-next >= 0.400.0

lucide-react सिर्फ़ डिफ़ॉल्ट आइकन के लिए चाहिए। अगर आप renderControls और renderNavigation (stories प्लेयर पर renderHeader और renderNavigation) के ज़रिए अपने कंट्रोल और नेविगेशन देते हैं, तो इसे इंस्टॉल करने की ज़रूरत नहीं।

lucide-angular सिर्फ़ डिफ़ॉल्ट आइकन के लिए चाहिए। अगर आप template slots (rkPlayerControls और rkPlayerNavigation, rkLightboxControls और rkLightboxNavigation, rkStoriesHeader और rkStoriesNavigation) के ज़रिए अपने कंट्रोल और नेविगेशन देते हैं, तो इसे इंस्टॉल करने की ज़रूरत नहीं।

lucide-vue-next सिर्फ़ डिफ़ॉल्ट आइकन के लिए चाहिए। अगर आप #controls और #navigation scoped slots (stories प्लेयर पर #header और #navigation) के ज़रिए अपने कंट्रोल और नेविगेशन देते हैं, तो इसे इंस्टॉल करने की ज़रूरत नहीं।

TypeScript

सभी पैकेज के साथ TypeScript टाइप डेफ़िनिशन आती हैं। अलग से @types पैकेज की ज़रूरत नहीं है।

ब्राउज़र सपोर्ट

reelkit सभी आधुनिक ब्राउज़र पर चलता है:

  • Chrome/Edge 88+
  • Firefox 78+
  • Safari 14+
  • iOS Safari 14+
  • Android Chrome 88+

अगले कदम