ReelKit

为 TikTok / Instagram Reels 风格体验打造的单条目滑动器

与框架无关、虚拟化、触摸优先。专为竖向视频流、Stories 浏览器和全屏画廊而生。

React

Angular

Vue

开始使用 Star on GitHub

Virtualized

Only 3 slides in DOM

在线演示 —— 点箭头试试

工作原理

一整条信息流。
只有三张幻灯片。

你的信息流可以有成千上万条内容。Reel 只保留当前这张幻灯片和它紧邻的上下两张处于挂载状态。

1
备好下一次滑动
当前这张幻灯片铺满视口。一张邻居在上方候着，另一张在下方。
2
在信息流中移动
向上滑看下一条，向下滑回上一条。已挂载的几张幻灯片一起移动。
3
只更新变化的部分
幻灯片停稳之后，移出范围的那条被卸载，新的邻居被挂载。仍在范围内的保持原样。

在不循环的信息流两端，只需要两张幻灯片。留意演示滑到边缘时，挂载数量的变化。

9 items in the feed3 mounted

VIEWPORT

PreviousOffscreen

CurrentVisible

NextOffscreen

Slide 3 of 9

In the DOM: 2, 3, 4

Expanded view · Neighbors are hidden in the actual slider

为性能而生

虚拟化渲染、零依赖、60fps 过渡

3个 DOM 节点

虚拟化

扛得住 10,000+ 条目，任何时刻只渲染 3 张幻灯片。

0依赖

零依赖

没有任何运行时依赖，核心包 gzip 后约 11.2 kB。

60fps

触摸优先

原生手感的滑动手势，带惯性和吸附点。

高性能

键盘导航

与框架无关

TypeScript 优先

无头 + 开箱样式

现成组件

可分享的 URL 状态

为什么叫 “ReelKit”？

Reel —— 指 Instagram Reels 和 TikTok 那样的竖向视频流。一次只看一条内容，滑动切换下一条。

Kit —— 指一组模块化的包。想要完全掌控就用无头的核心包，想快速接入就用框架绑定，想直接上手就用现成的视频播放器和图片画廊浮层。

简洁的 API

几行代码就能跑起来

tsx

import { Reel, ReelIndicator } from '@reelkit/react';

const items = ['Slide 1', 'Slide 2', 'Slide 3'];

function App() {
  return (
    <Reel
      count={items.length}
      size={[400, 600]}
      itemBuilder={(index) => (
        <div className="slide">{items[index]}</div>
      )}
    >
      <ReelIndicator />
    </Reel>
  );
}