ReelKit

TikTok／Instagram Reels 風の体験のための、1 アイテムずつ表示するスライダー

フレームワークに依存せず、仮想化され、タッチを優先します。縦型の動画フィード、ストーリービューアー、フルスクリーンのギャラリーのために作られています。

React

Angular

Vue

はじめる Star on GitHub

Virtualized

Only 3 slides in DOM

ライブデモ — 矢印で操作できます

しくみ

フィード全体を。
スライドは 3 枚だけ。

フィードには何千ものアイテムを入れられます。Reel がマウントしておくのは、現在のスライドとその前後の隣だけです。

1
次のスワイプに備えておく
現在のスライドが画面を埋めます。隣が 1 枚上に、もう 1 枚が下に控えています。
2
フィードを移動する
上にスワイプすれば次のアイテム、下にスワイプすれば前のアイテムへ。マウント済みのスライドは一緒に動きます。
3
変わったところだけ更新する
スライドが落ち着くと、範囲から外れたアイテムが取り除かれ、新しい隣がマウントされます。範囲に残ったものはそのままです。

ループしないフィードの両端では、スライドは 2 枚で足ります。デモが端に着いたとき、マウント数が変わるのを見てみてください。

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

パフォーマンスのための設計

仮想化された描画、依存関係ゼロ、60 fps のトランジション

3DOM 内

仮想化

10,000 件を超えるアイテムを扱えます。描画されるスライドは常に 3 枚だけです。

0依存関係

依存関係ゼロ

実行時の依存関係はありません。コアは gzip 後で約 11.2 kB です。

60fps

タッチ優先

慣性とスナップポイントのある、ネイティブなスワイプジェスチャー。

高いパフォーマンス

キーボード操作

フレームワークに依存しない

TypeScript ファースト

ヘッドレス + スタイル付き

すぐ使えるコンポーネント

共有できる URL の状態

なぜ「ReelKit」？

Reel — Instagram Reels や TikTok のような縦型の動画フィード。一度に 1 つのコンテンツを表示し、スワイプで次へ進みます。

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>
  );
}