react-use-click-outside-hook
v2.0.0
Published
Modal close handler while clicking outside of the modal
Downloads
34
Maintainers
Readme
🚀 React Click Outside Handler
Simple Modal close handler while clicking outside of the modal
installation
npm i react-use-click-outside-hook
Example
import { useState } from 'react'
import useClickOutside from "react-use-click-outside-hook"
import './App.css'
function App() {
const [isOpen, setOpen] = useState(false)
const Modal = () => {
const handler = () => setOpen(false)
const modalRef = useClickOutside(handler, "modal-parent-id")
return (
<div className="modal" ref={modalRef}>
<h1>Modal</h1>
<p>click outside to close this modal</p>
</div>
)
}
return (
<div className="wrapper">
{isOpen && (
<Modal />
)}
<button onClick={e => setOpen(!isOpen)} id="modal-parent-id">
{isOpen ? "Close" : "Open"}
</button>
</div>
)
}