reelkitReelKit

インストール

reelkit のパッケージをインストールして、プロジェクトを設定します。

パッケージの選び方

使うものだけをインストールしてください：

パッケージ説明用途
@reelkit/coreフレームワークに依存しないコア独自の組み込み
@reelkit/stories-coreフレームワークに依存しないストーリーエンジンストーリーの独自の組み込み
@reelkit/reactReact コンポーネントReact 18 以降のアプリケーション
@reelkit/react-reel-playerフルスクリーンの縦型動画プレイヤーInstagram／TikTok 風のプレイヤー
@reelkit/react-lightbox画像ギャラリーのオーバーレイフルスクリーンでの画像プレビュー
@reelkit/react-stories-playerInstagram 風のストーリープレイヤー自動送りとジェスチャーのあるストーリー
@reelkit/angularAngular のスタンドアロンコンポーネントAngular 19 以降のアプリケーション
@reelkit/angular-reel-playerフルスクリーンの縦型動画プレイヤーInstagram／TikTok 風のプレイヤー
@reelkit/angular-lightbox画像ギャラリーのオーバーレイフルスクリーンでの画像プレビュー
@reelkit/angular-stories-playerInstagram 風のストーリープレイヤー自動送りとジェスチャーのあるストーリー
@reelkit/vueVue 3 のコンポーネントとコンポーザブルVue 3 のアプリケーション
@reelkit/vue-reel-playerフルスクリーンの縦型動画プレイヤーInstagram／TikTok 風のプレイヤー
@reelkit/vue-lightbox画像ギャラリーのオーバーレイフルスクリーンでの画像プレビュー
@reelkit/vue-stories-playerInstagram 風のストーリープレイヤー自動送りとジェスチャーのあるストーリー

バンドルサイズ

どのパッケージもバンドルへの影響が最小になるよう最適化されています：

パッケージ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プラグインフルバンドル。ツリーシェイキング可能
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

Peer dependencies

フレームワーク向けのパッケージには、すでにプロジェクトに入っているはずの peer dependencies があります：

@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（ストーリープレイヤーでは renderHeader と renderNavigation）で独自のコントロールとナビゲーションを渡す場合は、インストールを省けます。

lucide-angular はデフォルトのアイコンにだけ使います。テンプレートスロット（rkPlayerControls と rkPlayerNavigation、rkLightboxControls と rkLightboxNavigation、rkStoriesHeader と rkStoriesNavigation）で独自のコントロールとナビゲーションを渡す場合は、インストールを省けます。

lucide-vue-next はデフォルトのアイコンにだけ使います。スコープ付きスロット #controls と #navigation（ストーリープレイヤーでは #header と #navigation）で独自のコントロールとナビゲーションを渡す場合は、インストールを省けます。

TypeScript

すべてのパッケージに TypeScript の型定義が同梱されています。追加の @types パッケージは必要ありません。

ブラウザー対応

reelkit はすべてのモダンブラウザーで動作します：

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

次のステップ