Back to articles
ReelKit: A Virtualized TikTok-Style Slider Engine

ReelKit: A Virtualized TikTok-Style Slider Engine

via Dev.to ReactKonstantin Kai

You're building a vertical feed — TikTok-style swipe, full-screen slides, thousands of items. You reach for a carousel library and hit the wall: it renders all slides to the DOM, chokes on touch gestures, and bundles half the internet. ReelKit renders 3 DOM nodes at any time — previous, current, next — whether you have 4 slides or 40,000. Zero dependencies in core. Touch-first with momentum and snap. ~3.7 kB gzipped. Try it live on StackBlitz — no setup needed. Quick start npm install @reelkit/react import { useState } from ' react ' ; import { Reel , ReelIndicator } from ' @reelkit/react ' ; const slides = [ { title : ' Discover ' , color : ' #6366f1 ' }, { title : ' Trending ' , color : ' #8b5cf6 ' }, { title : ' Following ' , color : ' #ec4899 ' }, { title : ' For You ' , color : ' #14b8a6 ' }, ]; export default function App () { const [ index , setIndex ] = useState ( 0 ); return ( < Reel count = { slides . length } style = { { width : ' 100% ' , height : ' 100dvh ' } } direction =

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
2 views

Related Articles