reelkitReelKit

Installation

Installiere die Pakete von reelkit und richte dein Projekt ein.

Paketauswahl

Installiere nur, was du auch nutzt:

PaketBeschreibungEinsatzzweck
@reelkit/coreCore, unabhängig vom FrameworkEigene Integrationen
@reelkit/stories-coreEngine für Stories, unabhängig vom FrameworkEigene Integrationen für Stories
@reelkit/reactReact-KomponentenApps mit React 18+
@reelkit/react-reel-playerVertikaler Reel Player im VollbildPlayer im Stil von Instagram/TikTok
@reelkit/react-lightboxLightbox für BildergalerienBildvorschau im Vollbild
@reelkit/react-stories-playerStories Player im Stil von InstagramStories mit automatischem Weiterschalten und Gesten
@reelkit/angularStandalone-Komponenten für AngularApps mit Angular 19+
@reelkit/angular-reel-playerVertikaler Reel Player im VollbildPlayer im Stil von Instagram/TikTok
@reelkit/angular-lightboxLightbox für BildergalerienBildvorschau im Vollbild
@reelkit/angular-stories-playerStories Player im Stil von InstagramStories mit automatischem Weiterschalten und Gesten
@reelkit/vueKomponenten und Composables für Vue 3Apps mit Vue 3
@reelkit/vue-reel-playerVertikaler Reel Player im VollbildPlayer im Stil von Instagram/TikTok
@reelkit/vue-lightboxLightbox für BildergalerienBildvorschau im Vollbild
@reelkit/vue-stories-playerStories Player im Stil von InstagramStories mit automatischem Weiterschalten und Gesten

Bundle-Größen

Alle Pakete sind darauf ausgelegt, das Bundle so wenig wie möglich zu vergrößern:

PaketJSJS (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

Vergleich mit anderen Bibliotheken

ReelKit rendert zu jedem Zeitpunkt 3 Slides ins DOM und kommt mit mehr als 10.000 Elementen zurecht. Andere Karussell-Bibliotheken rendern alle Slides und geraten bei großen Listen ins Stocken.

BibliothekJS (gzip)VirtualisierungHinweise
ReelKit (core + react)16.1 kBKeine Abhängigkeiten
ReelKit (core + angular)27.0 kBKeine Abhängigkeiten
ReelKit (core + vue)16.4 kBKeine Abhängigkeiten
Swiper~25 kBPluginVollständiges Bundle; Tree-Shaking möglich
Embla Carousel~7 kB✗Leichtgewichtig, auf Plugins aufgebaut
keen-slider~6 kB✗Keine Abhängigkeiten

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-Abhängigkeiten

Die Framework-Pakete haben Peer-Abhängigkeiten, die in deinem Projekt schon vorhanden sein sollten:

@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 brauchst du nur für die Standard-Icons. Wenn du über renderControls und renderNavigation eigene Bedienelemente und eine eigene Navigation mitbringst (beim Stories Player über renderHeader und renderNavigation), kannst du die Installation weglassen.

lucide-angular brauchst du nur für die Standard-Icons. Wenn du über die Template-Slots eigene Bedienelemente und eine eigene Navigation mitbringst (rkPlayerControls und rkPlayerNavigation, rkLightboxControls und rkLightboxNavigation, rkStoriesHeader und rkStoriesNavigation), kannst du die Installation weglassen.

lucide-vue-next brauchst du nur für die Standard-Icons. Wenn du über die Scoped Slots #controls und #navigation eigene Bedienelemente und eine eigene Navigation mitbringst (beim Stories Player über #header und #navigation), kannst du die Installation weglassen.

TypeScript

Alle Pakete liefern ihre TypeScript-Typdefinitionen mit. Zusätzliche @types-Pakete brauchst du nicht.

Browser-Unterstützung

reelkit unterstützt alle modernen Browser:

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

Nächste Schritte