Banner Stack

Usage

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

const [banners, setBanners] = useState([
  { id: 'update', title: 'Version 2.4 is ready.', action: { label: 'Reload', onClick: reload } },
]);

<BannerStack
  banners={banners}
  onDismiss={(id) => setBanners((all) => all.filter((banner) => banner.id !== id))}
/>

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

Props

bannersBannerStackItem[]

Oldest first, so the last is the newest and sits in front. Each has an id, a title, quieter text after it, a 16px icon and an action, which dismisses it too.

onDismiss(id: string) => void

Called once a dismissed banner has gone. Take it out of banners then.

classNamestring

Added to its root.

Notes

• Each one behind steps back 8px and 4%, shrinking towards its foot so the peeks stay even, and dims a little more. Beyond the third, they wait out of sight.
• A new banner drops in out of a blur over 440ms and pushes the rest back, and the foil line draws across whichever is in front. Dismissing takes 200ms, and only then calls onDismiss.
• The room it takes opens and shuts by grid rows, so the page under it moves down smoothly rather than jumping.
• Only the front one can be reached, by the pointer or the keyboard, and dismissing it from the keys hands focus to the next. The text after the title is the first thing to go when the stack is under 460px wide.
• With reduced motion, banners fade where they stand.