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

double click react

Add Answer

Grumpy Goat answered on February 4, 2022 Popularity 10/10 Helpfulness 1/10

answer double click react

related on double click in react

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 javascript

Link to this answer
Share Copy Link

Contributed on Feb 04 2022

Grumpy Goat

0 Answers Avg Quality 2/10

Closely Related Answers

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 double-cli

Link to this answer
Share Copy Link

Contributed on Jul 04 2023

Disgusted Dragonfly

0 Answers Avg Quality 2/10

double click react

Contents

More Related Answers

double click react

Closely Related Answers

on double click in react

Grepper

Documentation

Social

Legal

Contact

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