reelkitReelKit

Instalación

Instala los paquetes de reelkit y configura tu proyecto.

Elegir el paquete

Instala solo lo que uses:

PaqueteDescripciónCaso de uso
@reelkit/coreCore independiente del frameworkIntegraciones propias
@reelkit/stories-coreMotor de stories independiente del frameworkIntegraciones propias de stories
@reelkit/reactComponentes de ReactAplicaciones con React 18+
@reelkit/react-reel-playerReproductor vertical de reels a pantalla completaReproductor al estilo de Instagram/TikTok
@reelkit/react-lightboxLightbox para galerías de imágenesVista previa de imágenes a pantalla completa
@reelkit/react-stories-playerVisor de stories al estilo de InstagramStories con avance automático y gestos
@reelkit/angularComponentes standalone de AngularAplicaciones con Angular 19+
@reelkit/angular-reel-playerReproductor vertical de reels a pantalla completaReproductor al estilo de Instagram/TikTok
@reelkit/angular-lightboxLightbox para galerías de imágenesVista previa de imágenes a pantalla completa
@reelkit/angular-stories-playerVisor de stories al estilo de InstagramStories con avance automático y gestos
@reelkit/vueComponentes y composables de Vue 3Aplicaciones con Vue 3
@reelkit/vue-reel-playerReproductor vertical de reels a pantalla completaReproductor al estilo de Instagram/TikTok
@reelkit/vue-lightboxLightbox para galerías de imágenesVista previa de imágenes a pantalla completa
@reelkit/vue-stories-playerVisor de stories al estilo de InstagramStories con avance automático y gestos

Tamaño de los paquetes

Todos los paquetes están optimizados para añadir el mínimo peso al bundle:

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

Comparación con otras librerías

ReelKit renderiza 3 slides en el DOM en todo momento y admite más de 10.000 elementos. Otras librerías de carrusel renderizan todos los slides, y eso se atasca con listas grandes.

LibreríaJS (gzip)VirtualizaciónNotas
ReelKit (core + react)16.1 kBSin dependencias
ReelKit (core + angular)27.0 kBSin dependencias
ReelKit (core + vue)16.4 kBSin dependencias
Swiper~25 kBPluginBundle completo; admite tree-shaking
Embla Carousel~7 kB✗Ligera, basada en plugins
keen-slider~6 kB✗Sin dependencias

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

Los paquetes de cada framework tienen peer dependencies que tu proyecto ya debería incluir:

@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 solo hace falta para los iconos por defecto. Si pasas tus propios controles y tu navegación con renderControls y renderNavigation (renderHeader y renderNavigation en el visor de stories), no necesitas instalarlo.

lucide-angular solo hace falta para los iconos por defecto. Si pasas tus propios controles y tu navegación con los template slots (rkPlayerControls y rkPlayerNavigation, rkLightboxControls y rkLightboxNavigation, rkStoriesHeader y rkStoriesNavigation), no necesitas instalarlo.

lucide-vue-next solo hace falta para los iconos por defecto. Si pasas tus propios controles y tu navegación con los scoped slots #controls y #navigation (#header y #navigation en el visor de stories), no necesitas instalarlo.

TypeScript

Todos los paquetes incluyen definiciones de tipos de TypeScript. No hace falta instalar paquetes @types adicionales.

Compatibilidad con navegadores

reelkit funciona en todos los navegadores modernos:

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

Siguientes pasos