use-on-click-outside
Usage
npm i @biggerpixel/use-on-click-outside
import React, { useRef } from 'react';
import useBoolState from '@biggerpixel/use-bool-state';
import useOnClickOutside from '@biggerpixel/use-on-click-outside';
const Component = () => {
const elementWrapper = useRef<HTMLDivElement>(null);
const [isOpen, toggleIsOpen] = useBoolState(false);
useOnClickOutside(elementWrapper, toggleIsOpen);
return (
isOpen && (
<div ref={elementWrapper}>
<h2>Content!</h2>
<p>(Click outside to close)</p>
</div>
)
);
};
export default Component;