bdeloeste/react-click-outside-hook

Simple to use React Hook with click outside functionality

react-click-outside-hook 🎣

React Hook implementation with click outside functionality.

Features

• 👆 Support for pointer and touch 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>
}