指定要素の外側のクリックを検出するフック
refRefObject<T | null>callback(e: Event) => voidenabledbooleantrue| Prop | Type | Default |
|---|---|---|
ref | RefObject<T | null> | - |
callback | (e: Event) => void | - |
enabled | boolean | true |
voidvoid| Prop | Type | Default |
|---|---|---|
void | void | - |
import { useClickAway } from '@k8ordo/ui';const [isOpen, setIsOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useClickAway(ref, () => {
setIsOpen(false);
}, isOpen);
return (
<>
<button onClick={() => setIsOpen(true)}>Open Popup</button>
{isOpen && (
<div ref={ref}>Click outside to close</div>
)}
</>
);