KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

use-click-away

★ 79 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 (
    <div className="container">
      <button onClick={() => setModal(true)}>Show Modal</button>
      {modal && <div ref={clickRef} className="modal">Modal Content</div>}
    </div>
  );
}

```

## 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)

use-click-away

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README