You can use the hook this way:
# with npm
npm install react-click-outside
# with yarn
yarn add react-click-outside
- Import useRef, useState and the package in your app:
import {useRef, useState} from "react";
import {useOnClickOutside} from 'react-click-outside';
- Declare useState and useRef hooks in your component:
const [showModal, setShowModal] = useState(false)
const ref = useRef(null);
- Use the useOnClickOutside hook to handle clicks outside of a specific element:
useOnClickOutside(ref, () => setShowModal(false));