reelkitReelKit

Встановлення

Встановіть пакети reelkit і налаштуйте проєкт.

Вибір пакета

Встановлюйте лише те, що використовуєте:

ПакетОписКоли брати
@reelkit/coreЯдро без прив’язки до фреймворкуВласні інтеграції
@reelkit/stories-coreРушій історій без прив’язки до фреймворкуВласні інтеграції історій
@reelkit/reactКомпоненти ReactЗастосунки на React 18+
@reelkit/react-reel-playerПовноекранний вертикальний reel-плеєрПлеєр у стилі Instagram / TikTok
@reelkit/react-lightboxLightbox-галерея зображеньПовноекранний перегляд зображень
@reelkit/react-stories-playerПлеєр історій у стилі InstagramІсторії з автопрогортанням і жестами
@reelkit/angularАвтономні компоненти AngularЗастосунки на Angular 19+
@reelkit/angular-reel-playerПовноекранний вертикальний reel-плеєрПлеєр у стилі Instagram / TikTok
@reelkit/angular-lightboxLightbox-галерея зображеньПовноекранний перегляд зображень
@reelkit/angular-stories-playerПлеєр історій у стилі InstagramІсторії з автопрогортанням і жестами
@reelkit/vueКомпоненти та композабли для Vue 3Застосунки на Vue 3
@reelkit/vue-reel-playerПовноекранний вертикальний reel-плеєрПлеєр у стилі Instagram / TikTok
@reelkit/vue-lightboxLightbox-галерея зображеньПовноекранний перегляд зображень
@reelkit/vue-stories-playerПлеєр історій у стилі InstagramІсторії з автопрогортанням і жестами

Розміри бандлів

Усі пакети оптимізовані так, щоб мінімально впливати на розмір бандла:

Пакет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+ елементів. Інші бібліотеки каруселей рендерять усі слайди, і на великих списках це гальмує.

БібліотекаJS (gzip)ВіртуалізаціяПримітки
ReelKit (core + react)16.1 kBНуль залежностей
ReelKit (core + angular)27.0 kBНуль залежностей
ReelKit (core + vue)16.4 kBНуль залежностей
Swiper~25 kBПлагінПовний бандл; підтримує tree-shaking
Embla Carousel~7 kB✗Легка, на плагінах
keen-slider~6 kB✗Нуль залежностей

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-залежності

Пакети для фреймворків мають peer-залежності, які вже мають бути у вашому проєкті:

@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 (renderHeader і renderNavigation у плеєрі історій), встановлювати його не потрібно.

lucide-angular потрібен лише для стандартних іконок. Якщо ви передаєте власні елементи керування та навігацію через слоти шаблону (rkPlayerControls і rkPlayerNavigation, rkLightboxControls і rkLightboxNavigation, rkStoriesHeader і rkStoriesNavigation), встановлювати його не потрібно.

lucide-vue-next потрібен лише для стандартних іконок. Якщо ви передаєте власні елементи керування та навігацію через scoped-слоти #controls і #navigation (#header і #navigation у плеєрі історій), встановлювати його не потрібно.

TypeScript

Усі пакети постачаються з типами TypeScript. Додаткові @types пакети не потрібні.

Підтримка браузерів

reelkit працює в усіх сучасних браузерах:

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

Наступні кроки