reelkitReelKit

Primeiros passos

reelkit é um slider de um item por vez — apenas um item visível na tela, como no TikTok, no Instagram Reels ou nos Stories. Ideal para feeds de vídeo vertical, galerias em tela cheia e conteúdo que se percorre com o dedo.

Está curtindo o ReelKit?

Se o ReelKit for útil para você, considere dar uma estrela no GitHub. Isso ajuda outras pessoas desenvolvedoras a encontrar o projeto e mantém ele em andamento. Obrigado, eu agradeço de verdade o seu apoio!

0.x.x — Unstable API

O ReelKit está em desenvolvimento ativo. Enquanto a versão for 0.x.x, a API pode mudar entre versões menores sem período de descontinuação. Fixe a versão para evitar quebras inesperadas.

Escolha seu framework

Teste online

Teste direto no navegador, sem instalar nada:

Início rápido

Slider vertical mínimo com React:

tsx

Início rápido

Slider vertical mínimo com Angular:

typescript

Início rápido

Slider vertical mínimo com Vue:

vue

Conceitos principais

Reel

O componente Reel é o contêiner principal: cuida do estado do slider, dos gestos de toque, da navegação por teclado e das animações. Ele renderiza os slides pelo padrão de render prop, através de itemBuilder.

itemBuilder

A prop itemBuilder é uma função que recebe o índice e devolve o conteúdo de cada slide. Esse padrão é o que viabiliza a virtualização — apenas os itens visíveis são renderizados.

ReelIndicator

Componente opcional que mostra indicadores de progresso no estilo Instagram, sinalizando a posição atual dentro do slider.

tsx
html
vue-html

Formas de navegação já incluídas:

  • Toque/Deslizar: arraste para navegar, com inércia e encaixe
  • Teclado: setas (componentes de overlay também fecham com Escape)
  • Roda do mouse: ative pela prop enableWheel
  • Programática: use apiRef para next(), prev(), goTo()
tsx
html
vue

Próximos passos