Repeatable double-click and hybrid clicks with useDoubleClick hook
Introduction
We recently introduced improved controls for Zattoo players by adding double-click zones on edges to seek-forwards and backwards. The rest of the space was dedicated to fullscreen toggling.
Simple functionality at first glance, but… there are requirements
- Aggregation. When a user double-clicks or taps multiple times, we expect to have non-stop events. Similar to keyboard behaviour, where you can see feedback keeps popping up with each new action.
This means action should be fired not only on double-click (a.k.a 2 clicks) but rather on any multiplication of double-click: 2, 4, 6, 8, and so on. - Double-click does not interfere with other player features such as calling or un-calling elements on touch.
Implementation
To illustrate usage, we are implementing a button with click and double-click counter, like in this example.
The only difference is that we want to count clicks only when double-click events are not being fired.
onclick vs. ondblclick
ondblclick event is not repeatable, which means it will fire only once over repeatable clicks.
Let’s take a step back and think, when exactly is a double-click event being fired?
Ready? Well, the answer is when the user clicks exactly 2 times, not 3, not 4, but exactly 2.
Repeatable double-click
We can use what we discovered earlier for our benefit by combining it with event.detail, a property of click event. event.detail is the current click count. Using that, we can now evaluate exactly how many times the user clicks.
Now let’s create a repeatable double-click from a click event handler.
Preserve the previous UX behaviour.
We implemented a repeatable double-click but in doing so, we lost our click counter. As we discussed in the beginning, we want to count clicks that are not double-clicks.
To achieve that, we will use setTimeout to receive a notification of whether or not a double-click event has been fired.
Hook it up
For easy usage across our projects, we extracted this functionality to useDoubleClick hook.
It accepts two callbacks onDoubleClick and optional onClick and allows to configure DoubleClick timeout.
The hook returns hybrid-click callback that include both callbacks.
And our final component would look like that:
Wrap up
@zattoo/use-double-click
Take a look at how it works on zattoo.com
This hook is available as a public package:
https://www.npmjs.com/package/@zattoo/use-double-click
https://github.com/zattoo/use-double-click
Alternatives
tim-soft/use-double-click. Similar approach. However, repeatable double-click is not covered.
