Narcissistic Preening Monarch

    @zattoo/use-double-click
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    useDoubleClick

    React hook for continuous double-clicks and combining click and double-click events

    See Repeatable double-click and hybrid clicks solution with useDoubleClick hook article for more details.

    Install

    npm i @zattoo/use-double-click --save --save-exact

    Usage

    export const Example = () => {
        const [doubleClickCount, setDoubleClickCount] = useState(0);
        const [clickCount, setClickCount] = useState(0);
    
        const hybridClick = useDoubleClick(
            () => setDoubleClickCount(doubleClickCount + 1),
            () => setClickCount(clickCount + 1),
        );
    
        return (
            <section>
                <p>You clicked {clickCount} times</p>
                <p>You double-clicked {doubleClickCount} times</p>
                <button
                    type="button"
                    onClick={hybridClick}
                >
                    Click me
                </button>
            </section>
        );
    }

    Parameters

    • doubleClick: (event? React.SyntheticEvent) => void - double-click function to be executed when user double-clicks (single or multiple times) on the bounded component.
    • click?: (event? React.SyntheticEvent) => void - click function to be executed when user clicks (single time) on the bounded component.
    • options?: Object
      • timeout?: number - number of milliseconds to detect double-click event

    Install

    npm i @zattoo/use-double-click

    DownloadsWeekly Downloads

    332

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    13.5 kB

    Total Files

    16

    Last publish

    Collaborators

    • pverkhovskyi
    • godban
    • jekamoroz