raddix

useClickOutside

useClickOutside is a custom hook that detect clicks outside of specific component.

Installation

Install the custom hook from your command line.

npm i @raddix/use-click-outside

Usage

Basic example

In this example, when the user clicks outside the modal it will close.

import { useRef, useState } from 'react';
import { useClickOutside } from '@raddix/use-click-outside';
export const Example = () => {
const [isOpen, setIsOpen] = useState(false);
const refModal = useRef<HTMLDivElement>(null);
useClickOutside(refModal, () => setIsOpen(false));
return (
<>
<button onClick={() => setIsOpen(true)}>Open modal</button>
{isOpen && (
<div ref={refModal}>
<p>Click outside of the modal to close it</p>
</div>
)}
</>
);
};

API

Parameters

NameDescriptionRequiredType
refDOM element being referenced.YesRefObject
callbackThis function is called whenever a click event is detected outside of the referenced element.Yesfunction