# click-mouse-away

> Web components to handle click-away and mouse-leave events

Latest version **1.0.5** (published 2020-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install click-mouse-away
pnpm add click-mouse-away
yarn add click-mouse-away
bun add click-mouse-away
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2020-10-25 |
| First published | 2020-10-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Amir Goren |
| Maintainers | gorenamir |
| Keywords | click, mouse, mouseleave, away, web components |

## Links

- npm: https://www.npmjs.com/package/click-mouse-away
- Repository: https://github.com/gorenamir/click-mouse-away
- Homepage: https://github.com/gorenamir/click-mouse-away#readme
- Issues: https://github.com/gorenamir/click-mouse-away/issues
- npm.io page: https://npm.io/package/click-mouse-away

## Recent versions

- 1.0.5 (latest) — 2020-10-25
- 1.0.4 — 2020-10-23
- 1.0.3 — 2020-10-23
- 1.0.2 — 2020-10-23
- 1.0.1 — 2020-10-22
- 1.0.0 — 2020-10-22

## README

# click-mouse-away

click-mouse-away are JavaScript web components designed to handle click-away and mouse-leave events,
using modern expressive syntax.

## Installation

```bash
npm install click-mouse-away
```

or

```bash
yarn add click-mouse-away
```

## Usage

Just import the package into your JavaScript:

```javascript
import 'click-mouse-away';
```

Alternatively, include the package through a script tag:

```html
<script src="./click-mouse-away/dist/index.js"></script>
```

Then you'll be able to use the components in your markup:

```html
<click-away onclickaway="alert('You just clicked outside of this element!')">
    <div style="width: 150px; height: 150px; background-color: red;"></div>
</click-away>

<mouse-away onmouseaway="alert('Your mouse just left this element!')">
    <div style="width: 150px; height: 150px; background-color: blue;"></div>
</mouse-away>
```

Note that the ```this``` keyword in both components refers to the element itself, as expected.

JavaScript is supported too:

```javascript
const clickAwayElement = document.querySelector('click-away');
const mouseAwayElement = document.querySelector('mouse-away');

clickAwayElement.onclickaway = event => {
    // Handle the event here
};

mouseAwayElement.onmouseaway = event => {
    // And here
};

// Alternatively, use traditional event handling:

clickAwayElement.addEventListener('clickaway', event => {
    // Event handling here
});

mouseAwayElement.addEventListener('mouseaway', event => {
    // And here
});
```

## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License
[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/click-mouse-away · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._