react-click-outside-hook
v1.1.1
Published
Simple to use React Hook with click outside functionality
Downloads
12,657
Maintainers
Readme
react-click-outside-hook
🎣
React Hook implementation with click outside functionality.
Features
- 👆 Support for
pointer
andtouch
events - 🎣 Made with 💖 by React Hooks - Easy to use API thanks to React Hooks
- 💥 Tiny bundle ~850 bytes gzipped
Installation
Install using Yarn:
yarn add react-click-outside-hook
or NPM:
npm install react-click-outside-hook --save
Usage 🎣
useClickOutside
const [ref, hasClickedOutside] = useClickOutside()
The new React Hooks make it easier than ever to monitor the hasClickedOutside
state of
your components. Call the useClickOutside
hook which will return an array containing a ref
and the
hasClickedOutside
status.
Simply assign the ref
to the DOM element you want to monitor and the hook will
report the status.
import React from 'react'
import { useClickOutside } from 'react-click-outside-hook'
function Component() {
const [ref, hasClickedOutside] = useClickOutside()
return <div ref={ref}>{hasClickedOutside.toString()}</div>
}