reelkitReelKit

इंस्टॉलेशन

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

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

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

पैकेजविवरणकहाँ काम आता है
@reelkit/coreफ़्रेमवर्क से स्वतंत्र coreकस्टम इंटीग्रेशन
@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 17+ ऐप्लिकेशन
@reelkit/angular-reel-playerफ़ुलस्क्रीन वर्टिकल reel प्लेयरInstagram/TikTok जैसा प्लेयर
@reelkit/angular-lightboxइमेज गैलरी lightboxफ़ुलस्क्रीन इमेज प्रीव्यू
@reelkit/vueVue 3 कंपोनेंट और composablesVue 3 ऐप्लिकेशन
@reelkit/vue-reel-playerफ़ुलस्क्रीन वर्टिकल reel प्लेयरInstagram/TikTok जैसा प्लेयर
@reelkit/vue-lightboxइमेज गैलरी lightboxफ़ुलस्क्रीन इमेज प्रीव्यू

बंडल साइज़

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

पैकेजJSJS (gzip)CSSCSS (gzip)
@reelkit/core26.7 kB10.1 kB--
@reelkit/react13.4 kB4.8 kB--
@reelkit/react-reel-player17.0 kB5.4 kB9.7 kB2.1 kB
@reelkit/react-lightbox10.0 kB3.4 kB7.7 kB1.6 kB
@reelkit/react-stories-player19.1 kB5.8 kB7.5 kB1.7 kB
@reelkit/angular66.7 kB15.1 kB--
@reelkit/angular-reel-player149.0 kB24.4 kB--
@reelkit/angular-lightbox93.5 kB15.4 kB--
@reelkit/vue14.4 kB5.0 kB--
@reelkit/vue-reel-player21.1 kB6.2 kB9.7 kB2.1 kB
@reelkit/vue-lightbox14.4 kB4.1 kB6.8 kB1.4 kB

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

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

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

npm

bash

yarn

bash

pnpm

bash

npm

bash

yarn

bash

pnpm

bash

npm

bash

yarn

bash

pnpm

bash

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 >= 17.0.0
  • @angular/common >= 17.0.0

@reelkit/angular-reel-player

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

@reelkit/angular-lightbox

  • @reelkit/angular
  • @angular/core >= 17.0.0
  • lucide-angular >= 0.400.0

@reelkit/vue

  • vue >= 3.0.0

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

lucide-angular सिर्फ़ डिफ़ॉल्ट कंट्रोल आइकन के लिए चाहिए। अगर आप rkPlayerControls के ज़रिए अपने कंट्रोल देते हैं, तो इसे इंस्टॉल करने की ज़रूरत नहीं।

TypeScript

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

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

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

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

अगले कदम