react-click-and-hold

Detect a long click by using the ClickAndHoldWrapper component.

Install

ClickAndHoldWrapper is available as an npm package.

npm i react-click-and-hold

Usage

Here is a quick example to get you started, it's all you need:

import React from "react";
import ClickAndHoldWrapper from "react-click-and-hold/core";

export default function App() {
  const handleLongPress = (event) => {
    console.log("Long press");
  };

  const handleClick = (event) => {
    console.log("Simple click");
  };

  return (
    <div className="App">
      <h1>Click and hold</h1>
      <ClickAndHoldWrapper
        id={1}
        elmType={"div"}
        onHold={(e) => handleLongPress(e)}
        onClick={(e) => handleClick(e)}
        timeOut={300}
      >
        <button>Click&Hold</button>
      </ClickAndHoldWrapper>
    </div>
  );
}

Yes, it's really all you need to get started as you can see in this live and interactive demo:

License

MIT