The use-double-click from tim-soft

tim-soft / use-double-click Goto Github PK

View Code? Open in Web Editor NEW

:mouse2: A simple React hook for differentiating single and double clicks on the same component.

License: MIT License

JavaScript 100.00%

use-double-click's People

Contributors

Stargazers

Watchers

use-double-click's Issues

Use in loop / map?

This appears to be a great solution. However, I need it for multiple items in an array. Any suggestion?

No double click detection with useEffect

I am trying to detect double clicks and single clicks on buttons.

function App() {
  const buttonRef = useRef();
  const [message, setMessage] = useState();
  const [ws, setWS] = useState();

  useEffect(() => {
   const localWS = new WebSocket('ws://192.168.31.104:8000/ws');
    localWS.onmessage = (event) => {}
  }, []);

  useDoubleClick({
    onSingleClick: e => {
      console.log(e, 'single click');
    },
    onDoubleClick: e => {
      console.log(e, 'double click');
    },
    ref: buttonRef,
    latency: 250
  });

  return <button ref={buttonRef}>Click Me</button>
}
export default App;

This function works perfectly, but when I try to change a state variable, the useDoubleClick hooks stops to detect double clicks.

function App() {
  const buttonRef = useRef();
  const [message, setMessage] = useState();
  const [ws, setWS] = useState();

  useEffect(() => {
    const localWS = new WebSocket('ws://192.168.31.104:8000/ws');
    localWS.onmessage = (event) => {
      setMessage(JSON.parse(event.data)) // HERE
      setWS(localWS); // HERE
    }
  }, []);
  
  useDoubleClick({
    onSingleClick: e => {
      console.log(e, 'single click');
    },
    onDoubleClick: e => {
      console.log(e, 'double click');
    },
    ref: buttonRef,
    latency: 250
  });
  
  return <button ref={buttonRef}>Click Me</button>

}

What am I doing wrong?

Recommend Projects