MotionPager

Veegbare pagina's uit data: onboarding, carrousels en tabpanelen.

WebReact NativeSelectie en pagina's

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

App.jsx

import { useState } from 'react';
import { MotionHighlight, MotionPager, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const slides = [
  { id: 'welcome', title: 'Welcome', text: 'Swipe, drag or use the arrow keys.', tone: 'deep' },
  { id: 'data', title: 'Your data', text: 'Pages come from an array.', tone: 'forest' },
  { id: 'flick', title: 'Flick', text: 'A quick flick always turns one page.', tone: 'mint' },
  { id: 'done', title: 'Done', text: 'The index is yours to control.', tone: 'light' },
];

export default function App({ gap = 16, spring = 'default' }) {
  const [page, setPage] = useState(0);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];

  return (
    <div className="stage">
      <MotionPager
        className="pager"
        items={slides}
        index={page}
        onIndexChange={setPage}
        gap={gap}
        transition={transition}
        renderItem={(slide) => (
          <article className={`slide ${slide.tone}`}>
            <h2>{slide.title}</h2>
            <p>{slide.text}</p>
          </article>
        )}
      />
      <div className="controls">
        <button onClick={() => setPage(Math.max(0, page - 1))} disabled={page === 0}>
          Back
        </button>
        <MotionHighlight
          className="dots"
          itemClassName="dot"
          highlightClassName="dot-active"
          items={slides}
          value={slides[page].id}
          transition={transition}
          onValueChange={(key) => setPage(slides.findIndex((slide) => slide.id === key))}
          renderItem={(slide, { index }) => <span className="dot-number">{index + 1}</span>}
        />
        <button
          onClick={() => setPage(Math.min(slides.length - 1, page + 1))}
          disabled={page === slides.length - 1}
        >
          Next
        </button>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px;
}

.pager {
  border-radius: 20px;
}

.slide {
  display: grid;
  align-content: end;
  gap: 6px;
  height: 240px;
  padding: 24px;
  border-radius: 20px;
  user-select: none;
}

.slide h2 {
  margin: 0;
  font:
    800 30px/1.1 system-ui,
    sans-serif;
}

.slide p {
  margin: 0;
}

.deep {
  background: #0e2e24;
  color: #fff;
}

.forest {
  background: #176b52;
  color: #fff;
}

.mint {
  background: #43c58f;
  color: #0e2e24;
}

.light {
  background: #eaf6f0;
  color: #0e2e24;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.controls > button {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.controls > button:disabled {
  opacity: 0.4;
}

.dots {
  display: flex;
  min-width: 0;
  gap: 4px;
}

/* On a narrow phone the page dots shrink (never below 28px); Back and Next keep their size. */
.dot {
  flex: 0 1 36px;
  min-width: 28px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.dot-number {
  font:
    600 13px system-ui,
    sans-serif;
  color: #5b616b;
}

.dot-active {
  border-radius: 50%;
  background: #eaf6f0;
  box-shadow: inset 0 0 0 2px #176b52;
}

@media (max-width: 340px) {
  .controls {
    gap: 8px;
  }

  .controls > button {
    padding: 0 14px;
  }
}

Kortste gebruik

Onboarding.jsx

<MotionPager
  items={slides}
  index={page}
  onIndexChange={setPage}
  gap={16}
  renderItem={(slide) => <Slide slide={slide} />}
/>;

Wat het voor je regelt

Pagina's volgen vegen en muissleepbewegingen, bieden weerstand voorbij de uiteinden en komen tot rust met je loslaatsnelheid.
Een snelle zwiep slaat altijd een pagina om, en één gebaar slaat er nooit meer dan één om.
Horizontaal scrollen met een trackpad slaat ook pagina's om, en de uitloop van het momentum wordt genegeerd.
Pijltjestoetsen, Home en End werken als de pager focus heeft, en verticaal scrollen blijft werken.
Andere pagina's dan de actieve zijn inert.

Gebruik het voor

Een onboardingflow.
Een fotocarrousel.
Veegbare tabpanelen gekoppeld aan MotionHighlight.

Props

Prop	Type	Standaard	Beschrijving
`items`	`readonly T[]`	`—`verplicht	Je data-array.
`index`	`number`		De getoonde pagina. Laat hem weg om de pager zijn eigen pagina te laten bijhouden.
`defaultIndex`	`number`	`0`	Startpagina als `index` niet gecontroleerd is.
`onIndexChange`	`(index, item) => void`		Draait met de index en het item zodra een veeg, toets of wielgebaar tot rust komt.
`getKey`	`(item) => string \| number`	`item.id`	Geeft een unieke, stabiele key voor een item terug. Standaard `item.id`, of het item zelf bij strings en getallen.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Tekent een pagina; krijgt de index en of hij actief is.
`gap`	`number`	`0`	Ruimte tussen pagina's in pixels.
`itemClassName`	`string`		Class voor elk item-element; `itemStyle` zet de inline style.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

index kan gecontroleerd zijn (onIndexChange(index, item) meldt elke stop) of aan de pager worden overgelaten met defaultIndex.

Hetzelfde component en dezelfde props werken in React Native.

Gebruikt in deze voorbeelden

FotofeedVeeg door foto's, spring via miniaturen, open elke foto op volledig scherm en trek de details omhoog.MotionPagerMotionHighlightMotionZoomMotionSheet