https://github.com/brandonpittman/use-dismiss

The useDismiss() hook for React takes a callback, returns a ref, and invokes the callback when a click event occurs outside the ref's bounds, when the escape key is pressed, or both.
https://github.com/brandonpittman/use-dismiss

callback clickaway dismiss escape escape-key hook react

Last synced: 2 months ago
JSON representation

The useDismiss() hook for React takes a callback, returns a ref, and invokes the callback when a click event occurs outside the ref's bounds, when the escape key is pressed, or both.

• Host: GitHub
• URL: https://github.com/brandonpittman/use-dismiss
• Owner: brandonpittman
• Created: 2020-09-09T01:23:30.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-02-24T13:18:05.000Z (over 5 years ago)
• Last Synced: 2025-10-02T14:13:28.433Z (8 months ago)
• Topics: callback, clickaway, dismiss, escape, escape-key, hook, react
• Language: JavaScript
• Homepage:
• Size: 1.63 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# useDismiss 🧹

The `useDismiss()` hook for React takes a callback, returns a ref, and invokes the callback when a click event occurs outside the ref's bounds, when the escape key is pressed, **or both**.

## Setup ⌨

```sh

npm i use-dismiss #or yarn add use-dismiss

```

## Usage ⚛

```javascript

import { useState } from "react";

import useDismiss from "use-dismiss";

// or import { useClickAway, useEscape } from "use-dismiss" for just click away or escape listeners

export default () => {

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

  const ref = useDismiss(() => setModal(false));

  return (

    


       setModal(true)}>Show Modal

      {modal ? 
Modal Content
 : null}

    

  );

};

```


## API 📄

- `callback: (event) => any` - The callback that runs after user click