useAutoplay

UsageCopy Anchor Link

import { Remold, useAutoplay } from "@remold-ui/react";

function Showcase() {
  const autoplay = useAutoplay(VIEWS.length, { every: 2000 });
  return (
    <section ref={autoplay.ref}>
      <Remold.Morph trigger={autoplay.step}>{renderView(VIEWS[autoplay.step])}</Remold.Morph>
      <button {...autoplay.toggleProps}>{autoplay.playing ? "Pause" : "Play"}</button>
    </section>
  );
}

React only for now. In plain JavaScript, step your own state on a timer and run each change through transition from @remold-ui/dom.

• It only plays while the element with ref is on screen, so a page full of demos doesn't run them all at once.
• The first click, tap or key press inside the element stops it for good: the person is in charge now. The button with toggleProps is the exception, so it can pause and play.
• Give the steps different lengths with a function: every: (step) => (step === last ? 4000 : 2000).
• Anything that moves by itself for more than five seconds needs a way to pause it (WCAG 2.2.2). toggleProps makes any button that control.

OptionsCopy Anchor Link

ReturnsCopy Anchor Link