https://github.com/geobde/use-click-away

React hook to detect click or touch events outside an element.
https://github.com/geobde/use-click-away

Last synced: about 1 month ago
JSON representation

React hook to detect click or touch events outside an element.

• Host: GitHub
• URL: https://github.com/geobde/use-click-away
• Owner: geobde
• License: mit
• Created: 2020-06-20T23:40:49.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-10-26T22:42:29.000Z (about 2 months ago)
• Last Synced: 2024-10-26T23:59:58.183Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/use-click-away?activeTab=readme
• Size: 1.36 MB
• Stars: 78
• Watchers: 5
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-click-away`
• awesome-react-hooks-cn - `use-click-away`
• awesome-react-hooks - `use-click-away`
• awesome-react-hooks - `use-click-away`

README

        
# React hook to detect click or touch events

`useClickAway()` reacts to clicks outside the bound element, and calls the expression that is passed in when this event is detected.

Suppose you're working on a Modal component that renders a dialog box, and you wish to close the modal if the user clicks away this is the ideal scenario for `useClickAway()` custom hook.

## Installation

Using `npm`:

```bash

npm i use-click-away --save

```

## Usage

Import the hook:

```javascript

import { useClickAway } from "use-click-away";

```

### Full example

```

export default () => {

  const [modal, setModal] = React.useState(false);

  const clickRef = React.useRef("");

  useClickAway(clickRef, () => {

    setModal(false);

  });

  return (

    


       setModal(true)}>Show Modal

      {modal && 
Modal Content
}

    

  );

}


```

## Specification

### `useClickAway()` input

- `clickRef: element` - The dom element to bind our hook.

- `callback: function` - The callback that runs after user click

## Built With

[React](https://reactjs.org/)

## License

[MIT](./LICENSE.md)