https://github.com/krvajal/use-click-outside

https://github.com/krvajal/use-click-outside

Last synced: 17 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/krvajal/use-click-outside
• Owner: krvajal
• Created: 2019-10-12T17:16:55.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T10:38:06.000Z (almost 2 years ago)
• Last Synced: 2024-03-14T16:22:43.329Z (8 months ago)
• Language: TypeScript
• Homepage:
• Size: 337 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# use-click-outside

Simple React hook to detect when a click happens outside a component.

Useful for implementing modal dialogs and popups.

## Installation

```bash

yarn add @sweepbright/use-click-outside

```

```

npm install @sweepbright/use-click-outside

```

### Usage

```javascript

import  {useClickOutside} from '@sweepbright/use-click-outside'

function Popup() {

    const ref= React.useRef(null)

    const onClickOutside = React.useCallback(() => {

        alert('clicked outside element')

    })

    useClickOutside(ref, {

        onClickOutside

    })

    return 
 Hello 


}

```

### API

```javascript

useClickOutside(ref, config, deps)

```

### Params

#### `ref`

| Param   | Type         | Description                                                                      |

| ------- | ------------ | -------------------------------------------------------------------------------  |

| `ref`   | RefObject    | A  mutable ref object whose `current` property points target element DOM node    |

#### `config`

| Param   | Type         | Description                                                                      |

| ------- | ------------ | -------------------------------------------------------------------------------  |

| `config`   | Object    |  A configuration object for the behavior of the hook          |

#### Config options

The following options are supported

* `onClickOutside: (evt: MouseEvent) => void`

    * Required

    * Must be *memoized*

    * Will be called every time a click outside the target element is detected

    * It is passed the click event object

* `skip: boolean`

    * Optional

    * Defaults to `false`

    * Useful when you want to skip the listener. It can be used as a perf improvement when you know the element target element is not in the DOM.

#### `deps`

| Param   | Type         | Description                                                                      |

| ------- | ------------ | -------------------------------------------------------------------------------  |

| `deps`   | Array    | Optional dependency array |

### Contributing

TODO

### License

MIT