react-clicks

react-clicks is a React.js hook enabling easy management of various click types(single, double & long click) .

Written in TypeScript. Optimised for both desktop & mobile.

Credits to Nitish for the pretty picture.

Code Sandbox

https://codesandbox.io/s/react-clicks-example-tt5pt5

Installation

npm install react-clicks

yarn add react-clicks

Usage

There’s an example/ project showing the most basic usage.

import { useReactClicks } from 'react-clicks'

const App = () => {
  const clickProps = useReactClicks({
    singleClick: (e: ClickEventType) => {...},
    doubleClick: (e: ClickEventType) => {...},
    longClick: (e: ClickEventType) => {...}
  })
  
  return(
    <>
      <button {...clickProps}>I'm Hooked</button>  
    </>
  )
}

Options

delayDoubleClick

Defaults to 200

Expects number

The amount of milliseconds required between the first & the second click in order to treat it as a double click

delayLongClick

Defaults to 300

Expects number

The amount of milliseconds required to click down before it’s treated as a long click

disableContextMenu

Defaults to true

Expects boolean

Disables the context menu on mobile & desktop

If you don’t disable the context menu, long clicks on mobile will open the mobile context menu.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

GitHub

View Github