Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/varld/outside-click
👆 A simple outside click listener with no external dependencies.
https://github.com/varld/outside-click
Last synced: 4 months ago
JSON representation
👆 A simple outside click listener with no external dependencies.
- Host: GitHub
- URL: https://github.com/varld/outside-click
- Owner: varld
- License: mit
- Created: 2021-02-11T15:26:13.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-02-16T14:28:57.000Z (almost 4 years ago)
- Last Synced: 2024-07-01T00:24:08.459Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 150 KB
- Stars: 20
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Outside Click
A simple outside click listener with no external dependencies.
# Features
- Super Tiny [(Just 300 bytes)](https://bundlephobia.com/result?p=@varld/[email protected])
- Support for multiple inside elements
- Disable dynamically
## Install
```
# yarn
yarn add @varld/outside-click
# npm
npm install --save @varld/outside-click
```
## Usage
```typescript
import outsideClick from '@varld/outside-click';
outsideClick(element, (clickEvent) => {
console.log('Someone clicked outside!');
});
```
## API
### `outsideClick(elements, onOutsideClick, isEnabled)`
#### `elements: HTMLElement | HTMLElement[]`
The element(s) to attache the outside-click listener to. This can be a single `HTMLElement` or an array of `HTMLElement`.
#### `onOutsideClick: (evt: MouseEvent) => any`
This callback will be called, when an outside-click occurs.
#### `isEnabled?: () => boolean`
An __optional__ function which disables the outside-click listener if it returns false.
## License
MIT © [Tobias Herber](https://github.com/herber)
[](https://varld.co)