Breaking News: Grepper is joining You.com. Read the official announcement!

on double click in react

Disgusted Dragonfly answered on February 4, 2022 Popularity 8/10 Helpfulness 5/10

answer on double click in react

related double click react

on double click in react

Comment

import { useState, useEffect } from 'react';

function useSingleAndDoubleClick(actionSimpleClick, actionDoubleClick, delay = 250) {
    const [click, setClick] = useState(0);

    useEffect(() => {
        const timer = setTimeout(() => {
            // simple click
            if (click === 1) actionSimpleClick();
            setClick(0);
        }, delay);

        // the duration between this click and the previous one
        // is less than the value of delay = double-click
        if (click === 2) actionDoubleClick();

        return () => clearTimeout(timer);
        
    }, [click]);

    return () => setClick(prev => prev + 1);
}

const click = useSingleAndDoubleClick(callbackClick, callbackDoubleClick);
<button onClick={click}>clic</button>

Popularity 8/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: double-click javascript

Link to this answer
Share Copy Link

Contributed on Jul 04 2023

Disgusted Dragonfly

0 Answers Avg Quality 2/10

Closely Related Answers

double click react

Comment

-1

const [nrTaps, setNrTaps] = useState<number>(0);
const [startDate, setStartDate] = useState<number>(Date.now());

  const touchStart = () => {
    if (nrTaps >= 1 && Date.now() - startDate < 500) {
      setStartDate(Date.now());
      setNrTaps(0);

      // double tap
    } else {
      setStartDate(Date.now());
      setNrTaps(prevNr => prevNr + 1);

      // single tap;
    }
};

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: double-click double-cli

Link to this answer
Share Copy Link

Contributed on Feb 04 2022

Grumpy Goat

0 Answers Avg Quality 2/10

on double click in react

Contents

More Related Answers

on double click in react

Closely Related Answers

double click react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.