Snapshot Toolbar

Usage

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

<SnapshotToolbar
  defaultChecked={['timer', 'cursor']}
  onSnap={({ mode, checked }) => capture(mode, checked)}
  onClose={hideToolbar}
/>

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

Props

modesSnapshotToolbarMode[] = Entire screen, Selected window, Selected portion

The ways to take a capture, each with an id, a name for the tip and screen readers, and a 20px icon.

mode, onModeChangestring, (mode: string) => void

The chosen mode’s id, to hold it yourself. Otherwise the first starts chosen.

optionsSnapshotToolbarOption[] = Timer, Cursor, Thumbnail

The settings under Options, each with an id, a label and a 16px icon.

checked, onCheckedChangestring[], (checked: string[]) => void

The ids of the ticked options, to hold them yourself. They come back in the menu’s order.

defaultCheckedstring[] = ['timer']

The options ticked to begin with, when you don’t hold them.

label, doneLabelstring = 'Snap', 'Snapped!'

What Snap says, and what it says for a moment once it’s pressed.

onSnap(capture: { mode: string; checked: string[] }) => void

Called when Snap is pressed, with the mode and the ticked options.

onClose() => void

Shows a close button before the bar, which calls it.

optionsOpen, onOptionsOpenChangeboolean, (open: boolean) => void

To open and shut Options yourself. Opened this way, it leaves focus where it is.

refRef<SnapshotToolbarHandle>

Gives snap(), to take a capture from somewhere else, such as a shortcut.

classNamestring

Added to its root, which fills the width it’s given and centres the bar.

Notes

• The plate slides to a mode in 250ms. The tip waits 80ms, comes up in 150ms and goes in 50ms. Once it’s up, it travels to the next mode in 160ms and eases to the new name’s width, rather than going and coming back.
• Options grows up out of its button from 97% in 250ms, and shrinks to 99% in 150ms. Snap’s new letters rise 3px out of a 2px blur, 35ms apart, as their room opens over 240ms and the icon turns into a tick in 250ms. After 1.6 seconds it goes back, the letters leaving from the end.
• The arrows, Home and End move along the modes, and the tip goes with them. Options opens from the keys on its first or last item, Enter or Space ticks an option and leaves the menu open, and Escape hands focus back to Options.
• It fills the width it’s given and centres the bar, which is about 440px wide with everything in it. Under 440px the word Options becomes an icon and the hairline before it goes, and under 380px the close button goes too, so it fits a phone.
• Adapted from Snapshot Toolbar by Simon Rico on the transitions.dev community. With reduced motion, everything changes in place and nothing presses in, as in the original.