React wrapper for click-cluck utility. Postpones "onClick" event to prevent it in case of "onDoubleClick" event.
Generally it is a bad idea to have meaningful click and dblclick handlers on the same target. But if your styleguide already includes such things, this utility will help.
npm install --save @redneckz/react-click-cluckimport * as React from 'react';
import ReactDOM from 'react-dom';
import { clickCluck } from '@redneckz/react-click-cluck';
const TheBestProductButton = clickCluck()(
props => (
<button
className="the-best-product"
{...props}
>
Give me two!
</button>
)
);
ReactDOM.render(
<TheBestProductButton
onClick={() => console.log('Just wait a bit...')}
onDoubleClick={() => console.log('Need a package?')}
/>,
document.getElementById('root'),
);Press twice intermittently. And you will get:
Just wait a bit...
Just wait a bit...Make double click. And here it is:
Need a package?Also timeout can be configured:
const TheBestProductButton = clickCluck(
500, // 500ms by default
)(
'button' // Valid DOM component
);