Button with long press

It has been a while since I wrote some fun snippets. So here is one.

It is also a good chance for me to work on Stackblitz. I find them to be very good, reminiscent of the early Codesandbox before they got bloated.

The button's concept is very simple. What you need is:

• A timer and a state, to track when the long press finishes,
• Event handlers for the mouse's mousedown and mouseup statuses,
• Some CSS to show the long press' progress.

Hint: ignoring the mouseclick handling (and handle click events using mousedown and mouseup manually) makes things simpler.

See the code on Stackblitz here: Button with long press.

And a GIF showing the button in action below!

That's that! Until next time.