Hold to Confirm

Usage

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

<HoldToConfirm
  label='Hold to delete project'
  holdLabel='Deleting project'
  doneLabel='Deleted'
  done={deleted}
  onConfirm={() => {
    setDeleted(true);
    deleteProject(project.id);
  }}
/>

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

Props

label, holdLabel, doneLabelstring = 'Hold to delete project', 'Deleting project', 'Deleted'

What it says at rest, while it’s held, and once it’s done. The widest sets the width, so the button never changes size.

hintstring = 'Keep holding'

Above the button after a tap, to say it needs holding.

durationnumber = 1200

How long a hold takes to fill it, in ms.

tone'danger' | 'primary' = 'danger'

Danger fills it pink, for deleting. Primary fills it with foil, for anything else worth a pause, such as publishing.

onConfirm() => void

Called once, when a hold reaches the end.

done, defaultDoneboolean = false

Done, when you hold it: set it in onConfirm, and back to false to reset the button. A finished hold stays full until then, which suits waiting on the work. Or where it starts, when the button holds it.

disabledboolean = false

Faded, and it can’t be pressed.

classNamestring

Added to its root.

Notes

• The fill runs at a steady rate, so what’s left reads as time. Let go early and it drains on a spring that knocks once against the start and settles within about 400ms. Pressing again while it drains carries on from where it is.
• A press shorter than 200ms is a tap: the button nudges 4px to the right and settles back over 440ms, and Keep holding rises above it for 1.6s. A held pointer that wanders 16px off the button lets go, so a press can still be taken back by sliding off.
• Pressed, the button gives to 98%, and it springs back the moment it locks. The labels roll over in 300ms, the fill fades into the plate under it over 380ms, and the tick’s slot opens as the tick draws.
• It’s a real button. Space or Enter held down fills it the same way, and screen readers hear how long to hold it, Keep holding after a tap, and the done label once it’s done. A long press on a phone doesn’t bring up the page’s menu.
• With reduced motion, the fill still runs, since it shows what’s left, but it empties at once, and nothing gives, nudges or rolls.