@redneckz/react-click-cluck

react-click-cluck

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.

Installation

npm install --save @redneckz/react-click-cluck

How-to

React Example

import * 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
);

License

MIT