https://github.com/shelfio/react-outside-click
React library for handling outside clicks of a specified element
https://github.com/shelfio/react-outside-click
Last synced: 7 months ago
JSON representation
React library for handling outside clicks of a specified element
- Host: GitHub
- URL: https://github.com/shelfio/react-outside-click
- Owner: shelfio
- License: mit
- Created: 2023-06-22T10:29:51.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-06-10T04:58:54.000Z (7 months ago)
- Last Synced: 2025-06-10T05:31:05.527Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 88.9 KB
- Stars: 4
- Watchers: 13
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: license
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# @shelf/react-outside-click
React library for handling outside clicks of a specified element.
## Installation
Install the library using npm:
```shell
$ npm install @shelf/react-outside-click
```
Install the library using yarn:
```shell
$ yarn add @shelf/react-outside-click
```
## Usage
### ClickOutsideProvider
`ClickOutsideProvider` is a component that wraps its children and detects clicks outside of its container element.
```js
import { ClickOutsideProvider } from '@shelf/react-outside-click';
const Component = () => {
const onOutsideClick = () => {
console.log('Clicked outside')
};
return (
Shelf.io
);
};
```
#### Props
**onOutsideClick**
Type: `function (required)`
A function that will be called when an outside click is detected.
**disabled**
Type: `boolean (optional)`
If set to true, the outside click detection will be disabled.
**mouseEvent**
Type: `string (optional)`
The mouse event to listen for. Defaults to 'mousedown'
**listenerOptions**
Type: `boolean | AddEventListenerOptions (optional)`
Additional options for the event listener. By default, it uses capture phase.This behavior ensures that the click outside event is captured before any click events on the descendants, even if stopPropagation is used.
See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture
### useClickOutside
`useClickOutside` is a custom hook that attaches an outside click event listener to a specified element.
```js
import { useRef } from 'react'
import { useClickOutside } from '@shelf/react-outside-click';
const Component() {
const ref = useRef(null)
const handleClickOutside = () => {
console.log('Clicked outside')
}
useOnClickOutside(ref, handleClickOutside, {mouseEvent: 'mouseup'})
return Shelf.io
}
```
#### Props
**ref**
Type: `RefObject (required)`
A ref object that points to the target element.
**onOutsideClick**
Type: `function (required)`
A function that will be called when an outside click is detected.
**options:** `(optional)`
> **disabled**
Type: `boolean (optional)`
If set to true, the outside click detection will be disabled.
> **mouseEvent**
Type: `string (optional)`
The mouse event to listen for. Defaults to 'mousedown'
> **listenerOptions**
Type: `boolean | AddEventListenerOptions (optional)`
Additional options for the event listener. By default, it uses capture phase.This behavior ensures that the click outside event is captured before any click events on the descendants, even if stopPropagation is used.
See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture
## Publish
```sh
$ git checkout master
$ yarn version
$ yarn publish
$ git push origin master --tags
```
## License
MIT © [Shelf](https://shelf.io)