React Guide

Reel Component

The Reel component is the main container that manages slider state, handles touch gestures, keyboard navigation, and animations.

Auto-sizing

The size prop is optional. When omitted, Reel auto-measures its container via ResizeObserver and adapts to CSS-driven layout. The container must be sized by its parent (e.g. flex, grid, or explicit CSS dimensions).

itemBuilder Pattern

The itemBuilder prop is a function that receives the index and returns the content for each slide. This pattern enables virtualization — only visible items are rendered.

Navigation

Built-in navigation methods:

• Touch/Swipe: Drag to navigate with momentum and snap
• Keyboard: Arrow keys and Escape
• Mouse Wheel: Enable with enableWheel prop
• Programmatic: Use apiRef for next(), prev(), goTo()

ReelIndicator

Optional component that displays Instagram-style progress indicators showing the current position in the slider. When placed inside a Reel, it auto-connects to the parent's count and active values via context — no manual state wiring needed.

Live Demo: Basic Slider

Try it — click the buttons to navigate between slides.

Key Points

• size prop

  Optional [width, height] tuple, or omit for auto-sizing via CSS

• itemBuilder

  Receives index and returns the slide content

• apiRef

  Access controller methods for navigation

• afterChange

  Track current index for UI updates

Live Demo: Infinite List

reelkit renders only 3 slides in the DOM at any time (current, previous, next). This allows smooth scrolling for lists with 10,000+ items.

10,000 items — only 3 in the DOM. Use buttons or type a number to jump.

Live Demo: Growable List

Simulates an infinite feed where items load on demand — just like TikTok or Instagram. Start with 20 items, scroll near the end, and watch new batches arrive automatically.

Scroll to the end — new items load automatically. The counter and indicator grow as batches arrive.

Performance Tips

• Memoize data arrays

  Wrap your items array with useMemo. A new array reference on every render triggers a count update and re-computation of visible ranges.

• Keep itemBuilder lightweight

  It runs on every visible range change (typically 3 slides). Avoid heavy computation or side effects inside it.

• Load data near the edge

  Use afterChange to detect when the user approaches the end and fetch the next batch before they run out of slides (see Growable List demo above).

• Disable wheel in scrollable pages

  Set enableWheel={false} when the slider is embedded in a scrollable layout to avoid capturing the page scroll.