'/%3e%3c!--%20Motion%20trails%20--%3e%3crect%20x='14'%20y='7'%20width='12'%20height='2'%20rx='1'%20fill='white'%20opacity='.2'/%3e%3crect%20x='12'%20y='12'%20width='16'%20height='2'%20rx='1'%20fill='white'%20opacity='.35'/%3e%3crect%20x='10'%20y='17'%20width='20'%20height='2.5'%20rx='1.25'%20fill='white'%20opacity='.5'/%3e%3c!--%20Bold%20chevron%20down%20--%3e%3cpath%20d='M10%2024%20L20%2034%20L30%2024'%20stroke='white'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20fill='none'/%3e%3c/svg%3e)
Instalación
Instala los paquetes de reelkit y configura tu proyecto.
Elegir el paquete
Instala solo lo que uses:
| Paquete | Descripción | Caso de uso |
|---|---|---|
@reelkit/core | Core independiente del framework | Integraciones propias |
@reelkit/react | Componentes de React | Aplicaciones con React 18+ |
@reelkit/react-reel-player | Reproductor vertical de reels a pantalla completa | Reproductor al estilo de Instagram/TikTok |
@reelkit/react-lightbox | Lightbox para galerías de imágenes | Vista previa de imágenes a pantalla completa |
@reelkit/react-stories-player | Visor de stories al estilo de Instagram | Stories con avance automático y gestos |
@reelkit/angular | Componentes standalone de Angular | Aplicaciones con Angular 17+ |
@reelkit/angular-reel-player | Reproductor vertical de reels a pantalla completa | Reproductor al estilo de Instagram/TikTok |
@reelkit/angular-lightbox | Lightbox para galerías de imágenes | Vista previa de imágenes a pantalla completa |
@reelkit/vue | Componentes y composables de Vue 3 | Aplicaciones con Vue 3 |
@reelkit/vue-reel-player | Reproductor vertical de reels a pantalla completa | Reproductor al estilo de Instagram/TikTok |
@reelkit/vue-lightbox | Lightbox para galerías de imágenes | Vista previa de imágenes a pantalla completa |
Tamaño de los paquetes
Todos los paquetes están optimizados para añadir el mínimo peso al bundle:
| Paquete | JS | JS (gzip) | CSS | CSS (gzip) |
|---|---|---|---|---|
@reelkit/core | 26.7 kB | 10.1 kB | - | - |
@reelkit/react | 13.4 kB | 4.8 kB | - | - |
@reelkit/react-reel-player | 17.0 kB | 5.4 kB | 9.7 kB | 2.1 kB |
@reelkit/react-lightbox | 10.0 kB | 3.4 kB | 7.7 kB | 1.6 kB |
@reelkit/react-stories-player | 19.1 kB | 5.8 kB | 7.5 kB | 1.7 kB |
@reelkit/angular | 66.7 kB | 15.1 kB | - | - |
@reelkit/angular-reel-player | 149.0 kB | 24.4 kB | - | - |
@reelkit/angular-lightbox | 93.5 kB | 15.4 kB | - | - |
@reelkit/vue | 14.4 kB | 5.0 kB | - | - |
@reelkit/vue-reel-player | 21.1 kB | 6.2 kB | 9.7 kB | 2.1 kB |
@reelkit/vue-lightbox | 14.4 kB | 4.1 kB | 6.8 kB | 1.4 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ía | JS (gzip) | Virtualización | Notas |
|---|---|---|---|
| ReelKit (core + react) | 14.9 kB | Sin dependencias | |
| ReelKit (core + angular) | 25.2 kB | Sin dependencias | |
| ReelKit (core + vue) | 15.0 kB | Sin dependencias | |
| Swiper | ~25 kB | Plugin | Bundle completo; admite tree-shaking |
| Embla Carousel | ~7 kB | ✗ | Ligera, basada en plugins |
| keen-slider | ~6 kB | ✗ | Sin dependencias |
npm
npm install @reelkit/angularyarn
yarn add @reelkit/angularpnpm
pnpm add @reelkit/angularPeer dependencies
Los paquetes de cada framework tienen peer dependencies que tu proyecto ya debería incluir:
@reelkit/react
react>= 18.0.0react-dom>= 18.0.0
@reelkit/react-reel-player
@reelkit/reactreact>= 18.0.0react-dom>= 18.0.0lucide-react>= 0.400.0
@reelkit/react-lightbox
@reelkit/reactreact>= 18.0.0react-dom>= 18.0.0lucide-react>= 0.400.0
@reelkit/react-stories-player
@reelkit/reactreact>= 18.0.0react-dom>= 18.0.0lucide-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.0lucide-angular>= 0.460.0
@reelkit/angular-lightbox
@reelkit/angular@angular/core>= 17.0.0lucide-angular>= 0.400.0
lucide-react solo hace falta para los iconos de los controles por defecto. Si pasas tus propios controles con renderControls, no necesitas instalarlo.
lucide-angular solo hace falta para los iconos de los controles por defecto. Si pasas tus propios controles con rkPlayerControls, 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
- Guía del core - el motor independiente del framework
- Guía del framework - componentes, demos e integraciónGuía del framework - componentes, demos e integraciónGuía del framework - componentes, demos e integración
- Reel Player - reproductor de vídeo al estilo de TikTok/ReelsReel Player - reproductor de vídeo al estilo de TikTok/ReelsReel Player - reproductor de vídeo al estilo de TikTok/Reels
- Lightbox - galería de imágenes y vídeosLightbox - galería de imágenes y vídeosLightbox - galería de imágenes y vídeos
- Stories Player - visor de stories al estilo de InstagramStories Player - visor de stories al estilo de InstagramStories Player - visor de stories al estilo de Instagram