https://github.com/andreoav/click-outside-hook

A simple react hook to detect click or touch events outside an element.
https://github.com/andreoav/click-outside-hook

click-outside hooks react typescript

Last synced: about 23 hours ago
JSON representation

A simple react hook to detect click or touch events outside an element.

• Host: GitHub
• URL: https://github.com/andreoav/click-outside-hook
• Owner: andreoav
• License: mit
• Created: 2019-02-19T12:30:10.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-21T14:51:11.000Z (over 1 year ago)
• Last Synced: 2024-09-20T07:17:43.242Z (about 2 months ago)
• Topics: click-outside, hooks, react, typescript
• Language: TypeScript
• Homepage:
• Size: 2.02 MB
• Stars: 29
• Watchers: 3
• Forks: 1
• Open Issues: 51
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# click-outside-hook

A simple react hook to detect click or touch events outside an element and execute a provided callback when this happens.

[![NPM](https://img.shields.io/npm/v/click-outside-hook.svg)](https://www.npmjs.com/package/click-outside-hook)

[![CircleCI](https://circleci.com/gh/andreoav/click-outside-hook/tree/master.svg?style=svg)](https://circleci.com/gh/andreoav/click-outside-hook/tree/master) [![Greenkeeper badge](https://badges.greenkeeper.io/andreoav/click-outside-hook.svg)](https://greenkeeper.io/)

[![module formats: cjs, and es][module-formats-badge]][unpkg-dist]

## Install

```bash

yarn add click-outside-hook

```

## Usage

```js

import React from 'react';

import useClickOutside from 'click-outside-hook';

export default function SomeAwesomeComponent() {

  const ref = useClickOutside(() => console.log('my callback'));

  return (

    


      
Awesome content

    

  );

}

```


When the user clicks or touches outside the `Awesome content` element, the callback is executed.

## License

MIT © [andreoav](https://github.com/andreoav)

[unpkg-dist]: https://unpkg.com/click-outside-hook/dist

[module-formats-badge]: https://img.shields.io/badge/module%20formats-cjs%2C%20es-green.svg?style=flat-square