Посібник для React

Компонент Reel

The Reel — головний контейнер: він тримає стан слайдера, обробляє дотикові жести, навігацію з клавіатури та анімації.

Auto-sizing

The size необов’язковий. Якщо його не передати, Reel сам вимірює контейнер через ResizeObserver і підлаштовується під макет, заданий CSS. Розмір контейнера має задавати батьківський елемент — наприклад, flex, grid або явні розміри в CSS.

Патерн itemBuilder

The itemBuilder — функція, яка отримує індекс і повертає вміст слайда. Саме цей патерн дає віртуалізацію: рендеряться лише видимі елементи.

Навігація

Вбудовані способи навігації:

• Дотик / свайп: Тягніть, щоб гортати — з інерцією та прилипанням
• Клавіатура: Стрілки та Escape
• Колесо миші: Увімкніть enableWheel у пропсах
• Програмно: Використовуйте apiRef для next(), prev(), goTo()

Стан в URL

useOverlayUrlState будує контролер стану в URL для оверлея й повертає його цілком, а ви передаєте його в *UrlOverlay як його controller . Стан відкриття належить URL, тож прив’язаний оверлей відкривається сам, а посилання — звичайний спосіб його відкрити. Перший запис відсутнього параметра додає один запис в історію, кожен наступний його замінює, тож гортання ніколи не ховає кнопку «назад». Тримайте контролер, щоб читати value/позицією і керувати ним програмно: set(position) відкриває, set(null) закриває, а set — той самий низькорівневий запис, який оверлей робить усередині під час зміни слайда.

Об’єкт опцій приймає param, codec, та locator (усі три обов’язкові) плюс необов’язковий adapter. The codec та locator — узгоджена пара з однаковим Id, тож вони йдуть разом — для звичайної ?photo=3 галереї розгортайте ...urlIndexKey(() => images.length), який повертає обидві половини одразу. urlIndexKey зіставляє параметр з індексом слайда й обмежує його живою кількістю, яку повертає геттер, тож застарілий або позамежний ?photo=99 відхиляється й сам зникає з URL замість того, щоб відкрити слайд, якого ніхто не називав. Передавайте геттер, а не число, щоб межа лишалася правильною, поки посторінкова стрічка росте. Він загортає createIndexLocator (половину-локатор) і поєднує його з indexCodec. Посторінкова стрічка або галерея з адресацією за ідентичністю передає власну узгоджену пару codec + locator . Повна таблиця опцій — у довіднику API для React.

ReelIndicator

Необов’язковий компонент, що показує індикатори прогресу в стилі Instagram із поточною позицією в слайдері. Якщо він усередині Reel, він сам під’єднується до count та active значення через контекст — нічого зв’язувати вручну не треба.

Демо наживо: базовий слайдер

Спробуйте — натискайте кнопки, щоб гортати слайди.

Головне

• пропс size

  Необов’язковий кортеж [width, height] або пропустіть — розмір визначить CSS

• itemBuilder

  Отримує індекс і повертає вміст слайда

• apiRef

  Доступ до методів контролера для навігації

• afterChange

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

Демо наживо: нескінченний список

reelkit рендерить лише 3 слайди в DOM у будь-який момент (поточний, попередній, наступний). Це дає плавне прокручування списків із 10 000+ елементів.

10 000 елементів — і лише 3 в DOM. Гортайте кнопками або введіть номер для переходу.

Демо наживо: список, що росте

Імітує нескінченну стрічку, де елементи вантажаться за потреби — як у TikTok чи Instagram. Почніть із 20 елементів, прокрутіть до кінця й дивіться, як нові пакети надходять самі.

Прокрутіть до кінця — нові елементи завантажаться самі. Лічильник та індикатор ростуть із кожним пакетом.

Поради щодо продуктивності

• Мемоізуйте масиви даних

  Загортайте масив елементів у useMemo. Нове посилання на масив у кожному рендері спричиняє count оновлення й перерахунок видимих діапазонів.

• Тримайте itemBuilder легким

  Він виконується на кожну зміну видимого діапазону (зазвичай 3 слайди). Уникайте важких обчислень і побічних ефектів усередині.

• Вантажте дані ближче до краю

  Використовуйте afterChange щоб помітити наближення до кінця й підвантажити наступний пакет, доки слайди не скінчилися (дивіться демо зі списком, що росте, вище).

• Вимикайте колесо на сторінках із прокручуванням

  Set enableWheel={false} коли слайдер вбудований у макет із прокручуванням, щоб не перехоплювати прокручування сторінки.