Page Slide

Usage

import { PageSlide } from '@wdzyi/ui';

const [stack, setStack] = useState([
  { key: 'inbox', title: 'Inbox', body: <Inbox onOpen={open} /> },
]);

const open = (message) =>
  setStack((pages) => [...pages, { key: message.id, title: message.subject, body: <Message {...message} /> }]);

<PageSlide stack={stack} onBack={() => setStack((pages) => pages.slice(0, -1))} height={420} />

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

stackPageSlidePage[]

The pages from the first to the one showing, each with a key, a title and a body. Add one to go forward, and take the last off to go back.

onBack() => void

Called by the back button. Take the last page off the stack.

heightnumber | string = 360

The frame’s height. A longer page scrolls inside it.

Notes

• Forward, the new page slides in from the right over the old one, which drifts a third of the way left and dims beneath it. Back is the same in reverse, and the title morphs with Morph Text.
• Pages under the top one stay mounted and stop painting, so going back finds a list scrolled where it was left.
• If focus was inside, it moves into the new page going forward, and back to whatever opened it going back. Pressing back part way through a slide turns it round from where it is.
• Below 340px wide, the back button keeps its arrow and drops the last page’s name.
• With reduced motion, the pages change in place.