Довідник API для React

Повний довідник @reelkit/react : компоненти, пропси та методи.

Пропси Reel

ReelProps

Колбеки

Методи ReelApi

Доступ до методів слайдера через apiRef:

const apiRef = useRef<ReelApi>(null);

// Navigation
apiRef.current?.next();
apiRef.current?.prev();
apiRef.current?.goTo(5);           // instant
apiRef.current?.goTo(5, true);     // animated

// Lifecycle
apiRef.current?.adjust();          // recalculate positions
apiRef.current?.observe();         // start observing keyboard
apiRef.current?.unobserve();       // stop observing keyboard

Пропси ReelIndicator

ReelIndicatorProps

Компоненти-спостерігачі

Observe

Містить між сигналами ядра й рендерингом React без зайвих рендерів батька. Коли підписані сигнали змінюються, виконується заново лише функція children.

import { Observe } from '@reelkit/react';

<Observe signals={[controller.state.index]}>
  {() => <span>Current: {controller.state.index.value}</span>}
</Observe>

AnimatedObserve

Підписується на сигнали анімованих значень і плавно інтерполює через requestAnimationFrame.

import { AnimatedObserve } from '@reelkit/react';

<AnimatedObserve signal={controller.state.axisValue}>
  {(value) => (
    <div style={{ transform: `translateY(${value}px)` }} />
  )}
</AnimatedObserve>

SwipeToClose

<SwipeToClose> обгортає дітей у контейнер, що йде за вертикальним свайпом і викликає onClose, щойно свайп перейде поріг, — жест закриття Lightbox і Stories Player для вашого власного оверлея. SwipeToCloseProps типізує його пропси; SwipeToCloseDirection — це 'up' | 'down'.

SoundProvider

<SoundProvider> створює один SoundController, спершу без звуку, і передає його дітям через useSoundState. Оверлеї рендерять його самі; додавайте власний лише навколо власного плеєра, елементи керування якого ділять один стан звуку.

Hooks

useBodyLock

Блокує прокручування body й компенсує зсув на ширину смуги прокручування.

import { useBodyLock } from '@reelkit/react';

// Lock body scroll when overlay is open
useBodyLock(isOpen);

useOverlayUrlState

OverlayUrlStateOptions

Будує контролер стану в URL для оверлея, який ви передаєте в *UrlOverlay як його controller prop.

See Стан в URL у посібнику для React — там покроковий розбір і приклади.

useReactRouterUrlAdapter

A UrlAdapter на базі React Router. Передайте його як опцію adapter у useOverlayUrlState у застосунку з роутером, щоб роутер лишався єдиним джерелом правди про навігацію: запис history.pushState повз роутер лишає його місцеположення застарілим, і наступна навігація втрачає параметр. Запис торкається лише запиту, тож шлях і хеш лишаються недоторканими. Кожна зміна повідомляє, чи роутер додав запис на тій самій сторінці, замінив його чи пройшов історією, тож галерея, відкрита з <Link>, закривається одним кроком назад.

Постачається з окремого підшляху, тож застосунок без роутера ніколи не тягне react-router-dom у свій бандл. react-router-dom — необов’язкова peer-залежність.

import { useReactRouterUrlAdapter } from '@reelkit/react/react-router-url-adapter';

const adapter = useReactRouterUrlAdapter();
const photo = useOverlayUrlState({
  param: 'photo',
  adapter,
  ...urlIndexKey(() => images.length),
});

useReelContext

useReelContext() читає ReelContextValue найближчого батьківського <Reel> або повертає null поза ним. <ReelIndicator> підключається через нього; використовуйте його у власних елементах керування, які рендеряться як діти <Reel>, щоб вони йшли за слайдером без пропсів. ReelContext — об’єкт контексту за ним; задавайте власне значення лише в тесті чи власній обгортці.

useSoundState

useSoundState() читає SoundController з найближчого <SoundProvider> і кидає помилку поза ним. Reel Player, Lightbox і Stories Player обгортають свій вміст у провайдер, тож власні елементи керування, які ви передаєте через їхні render-пропси, можуть викликати його, щоб прочитати або перемкнути звук.

useFullscreen

useFullscreen({ ref }) керує Fullscreen API для елемента в ref і виходить із повного екрана, коли компонент демонтується. UseFullscreenProps — його аргумент; UseFullscreenResult — кортеж, який він повертає.

Accessibility

<Reel> рендериться як role="region" з aria-roledescription="carousel". Задайте пропс ariaLabel , щоб дати області назву для екранного читача. Ввічлива жива область оголошує «Слайд N з M» на кожну зміну слайда, не перерендерюючи карусель. Неактивні слайди отримують атрибут inert , тож фокус і навігація допоміжних технологій їх пропускають.

<ReelIndicator> рендериться як role="tablist" з рухомим tabindex на точках; стрілки переміщують фокус, а Enter або Space активує слайд.

Будуєте власне модальне вікно навколо <Reel>? captureFocusForReturn, createFocusTrap, та getFocusableElements — вони реекспортовані з @reelkit/react для повернення й утримання фокуса.

Utilities

createDefaultKeyExtractorForLoop

Створює екстрактор ключів, який дає раду однаковим індексам, коли loop увімкнено.

import { createDefaultKeyExtractorForLoop } from '@reelkit/react';

<Reel
  count={items.length}
  size={size}
  loop
  keyExtractor={createDefaultKeyExtractorForLoop(items.length)}
  itemBuilder={...}
/>

Визначення розміру

observeElementSize, getViewportSize, observeViewportSize, isMobileWidth, fitAspectRatio і isTouchDevice реекспортуються з @reelkit/react — для власного оверлея, який визначає свій розмір так само, як оверлеї reelkit. Див. Визначення розміру в API ядра.

Автовідтворення та завантаження

createTimerController, createSlideshowController і downloadFile також реекспортуються з @reelkit/react: таймер, на якому працюють плеєри історій, слайдшоу, що стоїть за autoAdvance у Lightbox, і помічник, що стоїть за його кнопкою завантаження. Див. Автовідтворення і Завантаження файлів в API ядра.