use-outside-click

Allows you to attach a listener for clicks outside a section of DOM. Like for instance, a modal. If we want any clicks outside the modal to say, close it, we can use-outside-click hook to easily implement this behavior.

Install

npm install --save use-outside-click

Usage

import * as React from 'react'

import { useMyHook } from 'use-outside-click'

const Example = () => {
    const node = React.useRef(null);
    const [modalOpen, setModalOpen] = React.useState(false);
    const toggleModal = () => setModalOpen(!modalOpen);

    useOutsideClick({
        node,
        onOutsideClick: toggleModal,
        isOpen: modalOpen
    });

    return (
        <div>
            {/* ... app code */}
            <Modal ref={node}>
                {example}
            </Modal>
        </div>
    )
}

License

MIT © rohanBagchi

This hook is created using create-react-hook.