reelkitReelKit

安装

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

包的选择

用到哪个装哪个：

包名说明适用场景
@reelkit/core与框架无关的核心自定义集成
@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 17+ 应用
@reelkit/angular-reel-player全屏竖向 Reel PlayerInstagram / TikTok 风格播放器
@reelkit/angular-lightbox图片画廊Lightbox全屏图片预览
@reelkit/vueVue 3 组件与组合式函数Vue 3 应用
@reelkit/vue-reel-player全屏竖向 Reel PlayerInstagram / TikTok 风格播放器
@reelkit/vue-lightbox图片画廊Lightbox全屏图片预览

打包体积

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

包名JSJS (gzip)CSSCSS (gzip)
@reelkit/core23.7 kB9.0 kB--
@reelkit/react12.8 kB4.7 kB--
@reelkit/react-reel-player17.0 kB5.4 kB9.7 kB2.1 kB
@reelkit/react-lightbox10.0 kB3.4 kB7.7 kB1.6 kB
@reelkit/react-stories-player18.8 kB5.8 kB7.5 kB1.7 kB
@reelkit/angular66.6 kB15.1 kB--
@reelkit/angular-reel-player149.3 kB24.4 kB--
@reelkit/angular-lightbox93.5 kB15.4 kB--
@reelkit/vue14.2 kB4.9 kB--
@reelkit/vue-reel-player21.1 kB6.2 kB9.7 kB2.1 kB
@reelkit/vue-lightbox14.4 kB4.1 kB6.8 kB1.4 kB

与其他库的对比

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

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

npm

bash

yarn

bash

pnpm

bash

npm

bash

yarn

bash

pnpm

bash

npm

bash

yarn

bash

pnpm

bash

同级依赖

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

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

@reelkit/angular-reel-player

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

@reelkit/angular-lightbox

  • @reelkit/angular
  • @angular/core >= 17.0.0
  • lucide-angular >= 0.400.0

@reelkit/vue

  • vue >= 3.0.0
lucide-react 只用于默认的控制图标。如果你通过 renderControls 提供自己的控件，就可以不装它。
lucide-angular 只用于默认的控制图标。如果你通过 rkPlayerControls 提供自己的控件，就可以不装它。

TypeScript

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

浏览器支持

reelkit 支持所有现代浏览器：

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

下一步