reelkitReelKit

安装

安装 reelkit 的各个包，并完成项目配置。

包的选择

用到哪个装哪个：

包名说明适用场景
@reelkit/core与框架无关的核心自定义集成
@reelkit/stories-core与框架无关的 Stories 引擎自定义 Stories 集成
@reelkit/reactReact 组件React 18+ 应用
@reelkit/react-reel-player全屏竖向 Reel PlayerInstagram / TikTok 风格播放器
@reelkit/react-lightbox图片画廊Lightbox全屏图片预览
@reelkit/react-stories-playerInstagram 风格 Stories Player带自动播放与手势的 Stories
@reelkit/angularAngular 独立组件Angular 19+ 应用
@reelkit/angular-reel-player全屏竖向 Reel PlayerInstagram / TikTok 风格播放器
@reelkit/angular-lightbox图片画廊Lightbox全屏图片预览
@reelkit/angular-stories-playerInstagram 风格 Stories Player带自动播放与手势的 Stories
@reelkit/vueVue 3 组件与组合式函数Vue 3 应用
@reelkit/vue-reel-player全屏竖向 Reel PlayerInstagram / TikTok 风格播放器
@reelkit/vue-lightbox图片画廊Lightbox全屏图片预览
@reelkit/vue-stories-playerInstagram 风格 Stories Player带自动播放与手势的 Stories

打包体积

所有包都针对最小的体积影响做过优化：

包名JSJS (gzip)CSSCSS (gzip)
@reelkit/core29.8 kB11.2 kB--
@reelkit/react13.8 kB4.9 kB--
@reelkit/react-reel-player17.1 kB5.4 kB9.7 kB2.1 kB
@reelkit/react-lightbox12.7 kB4.1 kB7.9 kB1.6 kB
@reelkit/react-stories-player25.3 kB7.5 kB9.9 kB2.1 kB
@reelkit/angular70.2 kB15.8 kB--
@reelkit/angular-reel-player148.1 kB24.4 kB15.0 kB3.5 kB
@reelkit/angular-lightbox113.6 kB19.1 kB10.2 kB2.2 kB
@reelkit/vue15.3 kB5.2 kB--
@reelkit/vue-reel-player21.0 kB6.2 kB9.7 kB2.1 kB
@reelkit/vue-lightbox18.2 kB4.9 kB7.0 kB1.4 kB
@reelkit/vue-stories-player25.4 kB7.9 kB9.9 kB2.1 kB

与其他库的对比

ReelKit 任何时候只往 DOM 里渲染 3 张幻灯片，可以扛住 10,000+ 条目。其他轮播库会渲染全部幻灯片，列表一大就卡。

库JS (gzip)虚拟化备注
ReelKit (core + react)16.1 kB零依赖
ReelKit (core + angular)27.0 kB零依赖
ReelKit (core + vue)16.4 kB零依赖
Swiper~25 kB插件完整包体；支持 tree-shaking
Embla Carousel~7 kB✗轻量，基于插件
keen-slider~6 kB✗零依赖

npm

bash
npm install @reelkit/react

yarn

bash
yarn add @reelkit/react

pnpm

bash
pnpm add @reelkit/react

npm

bash
npm install @reelkit/angular

yarn

bash
yarn add @reelkit/angular

pnpm

bash
pnpm add @reelkit/angular

npm

bash
npm install @reelkit/vue

yarn

bash
yarn add @reelkit/vue

pnpm

bash
pnpm add @reelkit/vue

同级依赖

框架相关的包都有同级依赖，通常你的项目里已经装好了：

@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 >= 19.0.0
  • @angular/common >= 19.0.0

@reelkit/angular-reel-player

  • @reelkit/angular
  • @angular/core >= 19.0.0
  • @angular/common >= 19.0.0
  • lucide-angular >= 0.460.0

@reelkit/angular-lightbox

  • @reelkit/angular
  • @angular/core >= 19.0.0
  • @angular/common >= 19.0.0
  • lucide-angular >= 0.460.0

@reelkit/angular-stories-player

  • @reelkit/angular
  • @angular/core >= 19.0.0
  • @angular/common >= 19.0.0
  • lucide-angular >= 0.460.0

@reelkit/vue

  • vue >= 3.0.0

@reelkit/vue-reel-player

  • @reelkit/vue
  • vue >= 3.3.0
  • lucide-vue-next >= 0.400.0

@reelkit/vue-lightbox

  • @reelkit/vue
  • vue >= 3.0.0
  • lucide-vue-next >= 0.400.0

@reelkit/vue-stories-player

  • @reelkit/vue
  • vue >= 3.3.0
  • lucide-vue-next >= 0.400.0

lucide-react 只用于默认图标。如果你通过 renderControls 和 renderNavigation（Stories Player 上是 renderHeader 和 renderNavigation）提供自己的控件和导航，就可以不装它。

lucide-angular 只用于默认图标。如果你通过模板插槽（rkPlayerControls 和 rkPlayerNavigation、rkLightboxControls 和 rkLightboxNavigation、rkStoriesHeader 和 rkStoriesNavigation）提供自己的控件和导航，就可以不装它。

lucide-vue-next 只用于默认图标。如果你通过作用域插槽 #controls 和 #navigation（Stories Player 上是 #header 和 #navigation）提供自己的控件和导航，就可以不装它。

TypeScript

所有包都自带 TypeScript 类型定义，不需要额外安装 @types 包。

浏览器支持

reelkit 支持所有现代浏览器：

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

下一步