reelkitReelKit

Instalação

Instale os pacotes do reelkit e configure seu projeto.

Escolha do pacote

Instale somente o que você usa:

PacoteDescriçãoQuando usar
@reelkit/coreCore independente de frameworkIntegrações personalizadas
@reelkit/reactComponentes ReactAplicações React 18+
@reelkit/react-reel-playerPlayer vertical em tela cheiaPlayer no estilo Instagram/TikTok
@reelkit/react-lightboxGaleria de imagens em lightboxVisualização de imagens em tela cheia
@reelkit/react-stories-playerPlayer de stories no estilo InstagramStories com avanço automático e gestos
@reelkit/angularComponentes standalone do AngularAplicações Angular 17+
@reelkit/angular-reel-playerPlayer vertical em tela cheiaPlayer no estilo Instagram/TikTok
@reelkit/angular-lightboxGaleria de imagens em lightboxVisualização de imagens em tela cheia
@reelkit/vueComponentes e composables do Vue 3Aplicações Vue 3
@reelkit/vue-reel-playerPlayer vertical em tela cheiaPlayer no estilo Instagram/TikTok
@reelkit/vue-lightboxGaleria de imagens em lightboxVisualização de imagens em tela cheia

Tamanho dos pacotes

Todos os pacotes são otimizados para pesar o mínimo possível no bundle:

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

Comparação com outras bibliotecas

O ReelKit mantém 3 slides no DOM a qualquer momento e dá conta de mais de 10.000 itens. Outras bibliotecas de carrossel renderizam todos os slides, o que trava em listas grandes.

BibliotecaJS (gzip)VirtualizaçãoObservações
ReelKit (core + react)14.9 kBSem dependências
ReelKit (core + angular)25.2 kBSem dependências
ReelKit (core + vue)15.0 kBSem dependências
Swiper~25 kBPluginBundle completo; permite tree-shaking
Embla Carousel~7 kB✗Leve, baseada em plugins
keen-slider~6 kB✗Sem dependências

npm

bash

yarn

bash

pnpm

bash

npm

bash

yarn

bash

pnpm

bash

npm

bash

yarn

bash

pnpm

bash

Peer dependencies

Os pacotes de framework declaram peer dependencies que provavelmente já estão no seu projeto:

@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 só é necessário para os ícones padrão dos controles. Se você fornecer seus próprios controles por renderControls, pode dispensar a instalação.

lucide-angular só é necessário para os ícones padrão dos controles. Se você fornecer seus próprios controles por rkPlayerControls, pode dispensar a instalação.

TypeScript

Todos os pacotes já vêm com definições de tipo TypeScript. Nenhum pacote @types adicional é necessário.

Suporte dos navegadores

O reelkit funciona em todos os navegadores modernos:

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

Próximos passos