React Click Away Utilities

React.js utilities to listen for click away events. Utilities contain a hook and a high order click away component.

Install with npm or yarn:

# via npm
npm install @donnikitos/react-clickaway

# via yarn
yarn add @donnikitos/react-clickaway

Usage

The useClickAwayListener hook takes 2 to 3 arguments, which register the click-away-listener. The hook does not return any value, it just sits the in the code.

Arguments

function useClickAwayListener(
    observedElement: Element | null | undefined,
    callBack: (event: MouseEvent) => void,
    excludedElements?: (Element | null | undefined)[],
): void;

Example

import { useState } from 'react';
import { useClickAwayListener } from 'react-clickawaylistener';

// use in Component
function App(props) {
    const [reference, setReference] = useState<HTMLElement | null>(null);
    const [excluded, setExcluded] = useState<HTMLElement | null>(null);

    const cb = useCallback(() => {
        console.log('Event triggered!');
    }, []);

    useClickAwayListener(reference, cb, [excluded]);

    return (
        <>
            <div>I trigger the click-away-event</div>
            <div ref={setReference}>I do not trigger the event</div>
            <div>I trigger it too</div>
            <div ref={excluded}>I am not</div>
        </>
    );
}

License

MIT Copyright (c) 2021 Nikita 'donnikitos' Nitichevski.