Referencia de la API de React

Referencia completa de los componentes, las props y los métodos de @reelkit/react.

Props de Reel

ReelProps

Callbacks

Métodos de ReelApi

Accede a los métodos del slider a través de 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

Props de ReelIndicator

ReelIndicatorProps

Componentes observadores

Observe

Conecta las señales del core con el renderizado de React sin re-renderizar al padre. Solo la función children se vuelve a ejecutar cuando cambian las señales a las que está suscrita.

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

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

AnimatedObserve

Se suscribe a señales de valores animados e interpola con suavidad usando requestAnimationFrame.

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

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

Hooks

useBodyLock

Bloquea el scroll del body y compensa el salto por el ancho de la barra de desplazamiento.

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

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

useOverlayUrlState

OverlayUrlStateOptions

Crea un controlador de estado en la URL para un overlay, que después pasas a un *UrlOverlay en su prop controller.

Consulta el estado en la URL en la guía de React para ver la explicación paso a paso y los ejemplos.

useViewedState

ViewedStateOptions

Recuerda hasta dónde llegó alguien en una galería y sigue el almacenamiento mientras el componente está montado. Pasa la misma clave que usa la barra de direcciones y una entrada guardada se leerá exactamente igual que el parámetro de un enlace compartido. Lee entries con Observe para que un anillo se repinte cuando se registra una posición, aquí o en otra pestaña.

import {
  useViewedState,
  urlStableIdTwoAxisKey,
  twoAxisViewedTracking,
  Observe,
} from '@reelkit/react';
import {
  StoriesRingList,
  createStoriesViewedState,
} from '@reelkit/react-stories-player';

const key = urlStableIdTwoAxisKey({ outerItems, innerItems });
const seen = useViewedState({
  storageKey: 'stories-seen',
  ...key,
  ...twoAxisViewedTracking,
});
const viewed = createStoriesViewedState(seen, () => groups);

<Observe signals={[seen.entries]}>
  {() => (
    <StoriesRingList
      groups={groups}
      viewedState={viewed.viewedCounts()}
      onSelect={open}
    />
  )}
</Observe>;

useReactRouterUrlAdapter

Un UrlAdapter basado en React Router. Pásalo como opción adapter de useOverlayUrlState en una aplicación con router para que el router siga siendo la única fuente de verdad de la navegación: escribir con history.pushState a sus espaldas deja su ubicación desfasada y su siguiente navegación pierde el parámetro. Las escrituras solo tocan la query, así que la ruta y el hash se mantienen intactos. Cada cambio indica si el router hizo push en la misma página, sustituyó la entrada o se movió por el historial, así que una galería abierta desde un <Link> se cierra volviendo atrás una vez.

Se publica en su propia subruta, así que una aplicación sin router nunca mete react-router-dom en su bundle. react-router-dom es una peer dependency opcional.

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

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

Accesibilidad

<Reel> se renderiza como role="region" con aria-roledescription="carousel". Usa la prop ariaLabel para darle a la región un nombre para los lectores de pantalla. Una región en vivo educada anuncia "Slide N of M" en cada cambio de slide sin re-renderizar el carrusel. Los slides inactivos reciben el atributo inert, así que el foco y la navegación con tecnologías de apoyo se los saltan.

<ReelIndicator> se renderiza como role="tablist" con tabindex itinerante en los puntos; las flechas mueven el foco y Intro o Espacio activan el slide.

¿Vas a crear un modal propio alrededor de <Reel>? captureFocusForReturn, createFocusTrap y getFocusableElements se reexportan desde @reelkit/react para devolver y atrapar el foco.

Utilidades

createDefaultKeyExtractorForLoop

Crea un extractor de claves que resuelve los índices duplicados cuando loop está activado.

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

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