ReelKit

Слайдер по одному елементу для стрічок у стилі TikTok / Instagram Reels та історій

Незалежний від фреймворку, віртуалізований, орієнтований на дотик. Створений для вертикальних відеострічок, переглядачів історій і повноекранних галерей.

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

Створено для продуктивності

Віртуалізований рендеринг, нуль залежностей, переходи з 60 fps

3у DOM

Віртуалізований

Витримує 10 000+ елементів. У DOM одночасно лише 3 слайди.

0залежностей

Нуль залежностей

Жодних рантайм-залежностей. Ядро — близько 11.2 кБ у gzip.

60fps

Спершу дотик

Нативні свайпи з інерцією та точками прилипання.

Продуктивний

Навігація з клавіатури

Незалежний від фреймворку

TypeScript передусім

Headless + готові стилі

Готові компоненти

Стан в URL, яким можна ділитися

Чому «ReelKit»?

Reel — вертикальні відеострічки, як в Instagram Reels і TikTok. По одному елементу за раз, свайп — і далі.

Kit — модульний набір пакетів. Беріть headless-ядро для повного контролю, прив’язки до фреймворків для швидкого старту або готові оверлеї для відеоплеєрів і галерей зображень.

Простий 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>
  );
}