react-click-outside-hook
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-click-outside-hook package

1.1.1 • Public • Published

react-click-outside-hook 🎣

Version Badge GZipped size Build Status Coverage Status License Downloads styled with prettier

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>
}

Package Sidebar

Install

npm i react-click-outside-hook

Weekly Downloads

2,267

Version

1.1.1

License

MIT

Unpacked Size

19.2 kB

Total Files

7

Last publish

Collaborators

  • bdelo