UseDoubleClick

Description

useDoubleClick is constitued of 3 arguments, there is useDoubleClick(ref: RefObject, callback: () => void, msDetector: number). I don't have to explain the first two however msDetector is used to register the double click which is under a certain amount of millisecond, for example clicks which are over the limit of 300ms are not register.

Example

import { useRef, useState } from "react";
import { useDoubleClick } from '@oneforx/poseidon'

export const Page = () => {
    const [ inputDisabled, setInputDisabled ] = useState(true);
    const inputRef = useRef();

    // DoubleClick on the element get the element enabled
    useDoubleClick(inputRef, () => {
        setInputDisabled(false);
    }, 300);
    
    return (
        <div>
            <input ref={inputRef} type="text" placeholder="double click to enable" disabled={inputDisabled} />
        </div>
    );
}

Bonus

import { useRef, useState } from "react";
import { useDoubleClick, useClickOutside } from '@oneforx/poseidon'

export const Page = () => {
    const [ inputDisabled, setInputDisabled ] = useState(true);
    const inputRef = useRef();

    // DoubleClick on the element get the element enabled
    useDoubleClick(inputRef, () => {
        setInputDisabled(false);
    }, 300);


    // When we click outside the element get disabled
    useClickOutside(inputRef, () => {
        setInputDisabled(true);
    });

    
    return (
        <div>
            <input ref={inputRef} type="text" placeholder="double click to enable" disabled={inputDisabled} />
        </div>
    );
}