react-use-event-outside

Installation

Install with Yarn:

yarn add @omtanke/react-use-event-outside

Or with NPM:

npm i @omtanke/react-use-event-outside

Import into your component like so:

import useEventOutside from '@omtanke/react-use-event-outside';

Usage

useEventOutside(REF, EVENT_NAME, FUNCTION);

REF: Outside which element you want to trigger.

EVENT_NAME: You want to listen to the event (Ex: 'mousedown', 'touchstart', etc.).

FUNCTION: The function you want to run when triggered.

Example

CodeSandbox

or

const App = () => {
    const ref = useRef(null);
    const [isOpen, setIsOpen] = useState(false);
    
    const closeMenu = useCallback(() => {
        setIsOpen(false);
    }, []);
    
    useEventOutside(ref, 'mousedown', closeMenu);
    
    return (
        <nav className="dropdown" ref={ref}>
            <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
            {isOpen &&
                <ul className='dropdown-menu'>
                    <li className='dropdown-item'>Item</li>
                    <li className='dropdown-item'>Item</li>
                </ul>    
            }
        </nav>
    );
};