# extended-click-outside

> Advanced outside-click handler for modern web applications

Latest version **3.2.1** (published 2025-11-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install extended-click-outside
pnpm add extended-click-outside
yarn add extended-click-outside
bun add extended-click-outside
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.2.1 |
| Published | 2025-11-24 |
| First published | 2023-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.0.0 |
| Dependencies | 0 |
| Unpacked size | 51 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Ridiger Daniil Dmitrievich |
| Maintainers | danyaridiger |
| Keywords | dom, click, outside, clickoutside, away, clickaway, extended, vanillajs, lightweight |

## Links

- npm: https://www.npmjs.com/package/extended-click-outside
- Repository: https://github.com/danyaridiger/extended-click-outside
- Homepage: https://github.com/danyaridiger/extended-click-outside#readme
- Issues: https://github.com/danyaridiger/extended-click-outside/issues
- npm.io page: https://npm.io/package/extended-click-outside

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 3.2.1 (latest) — 2025-11-24
- 3.2.0 — 2025-10-24
- 3.1.3 — 2025-10-04
- 3.1.2 — 2025-10-04
- 3.1.1 — 2025-10-04
- 3.1.0 — 2025-10-04
- 3.0.0 — 2025-09-30
- 2.0.1 — 2025-07-02
- 2.0.0 — 2025-07-01
- 1.1.1 — 2023-09-01
- 1.1.0 — 2023-02-05
- 1.0.3 — 2023-02-05
- 1.0.2 — 2023-02-05
- 1.0.1 — 2023-02-05
- 1.0.0 — 2023-02-05
- … 1 more at https://npm.io/package/extended-click-outside/versions

## README

# extended-click-outside v3.2.1

---

### Brief annotation

**extended-click-outside** is a utility that assists developers in registering `click-outside` event handlers. To create a handler, simply pass a valid selector to its `init` instance method. This selector can also be an object, such as an element reference from various frameworks and libraries. Multiple configuration options allow you to create customized handlers for specific needs. These handlers are commonly used with form controls and interactive shells to define their properties and behavior based on their inactive state.

An important feature is that a single DOM element can have only one Extended Click Outside listener. This design prevents web applications from being overloaded with redundant handlers. The utility works correctly in all standard browser environments, making it suitable for a wide range of web applications.

### Installation with npm

`npm install --save extended-click-outside`

### Installation with yarn

`yarn add --production extended-click-outside`

### Importing

```js
import ExtendedClickOutside from "extended-click-outside";
```

### Importing types

```js
import type { ExtendedClickOutsideConfig } from "extended-click-outside";
```

### Usage with UMD

_Somewhere in your markup..._

```html
<script src="./public/scripts/extended-click-outside/index.umd.js"></script>
```

_Somewhere in your script below..._

```js
const intance = new window.ExtendedClickOutside();
```

## Table of contents

- [Simple example](#simple-example)
- [Example with config](#example-with-config)
- [Example with framework](#example-with-framework)
- [Removal of handler](#removal-of-handler)
- [Removal of all handlers](#removal-of-all-handlers)
- [Quantity information](#quantity-information)
- [Config list](#config-list)
- [License](#license)

## Simple example

Creating extended click outside handler on "div" element.

```js
import ExtendedClickOutside from "extended-click-outside";

const extendedClickOutside = new ExtendedClickOutside();
const div = document.querySelector("div");
const handler = () => console.log("extended-click-outside: handler");

extendedClickOutside.init(div, handler);
```

## Example with config

Creating disposal handler on "div" element with "capture" flag.

```js
import ExtendedClickOutside from "extended-click-outside";

const extendedClickOutside = new ExtendedClickOutside();
const div = document.querySelector("div");
const handler = () => console.log("extended-click-outside: disposal handler");
const config = {
  once: true,
  capture: true,
};

extendedClickOutside.init(div, handler, config);
```

## Example with framework

Creating handler on React DOMRef.

```js
import { useRef, useEffect } from "react";
import ExtendedClickOutside from "extended-click-outside";

export default function ComponentWithRef() {
  const simpleRef = useRef();
  const extendedClickOutside = new ExtendedClickOutside();
  const handler = () => console.log("extended-click-outside: DOMRef handler");

  useEffect(() => {
    extendedClickOutside.init(simpleRef.current, handler);
  }, []);

  return (
    <div className="with-ref">
      <h3 ref={simpleRef}>Simple DOMRef</h3>
    </div>
  );
}
```

## Removal of handler

Removal of registered handler from element.

```js
import ExtendedClickOutside from "extended-click-outside";

const extendedClickOutside = new ExtendedClickOutside();
const div = document.querySelector("div");

// Setting up handler...

extendedClickOutside.remove(div, true);

// Second argument works like "useWarnings" flag from config.
```

## Removal of all handlers

Removal of all registered handlers from all elements.

```js
import ExtendedClickOutside from "extended-click-outside";

const extendedClickOutside = new ExtendedClickOutside();
const div = document.querySelector("div");
const span = document.querySelector("span");

// Setting up handlers...

extendedClickOutside.removeAllListeners();
```

## Check listener for a given element

Checking if a listener exists for the given element.

```js
import ExtendedClickOutside from "extended-click-outside";

const extendedClickOutside = new ExtendedClickOutside();
const div = document.querySelector("div");

// Setting up handler...

const presence = extendedClickOutside.isListenerExisting(div);
```

## Quantity information

Get information about the quantuty of handlers.

```js
import ExtendedClickOutside from "extended-click-outside";

const extendedClickOutside = new ExtendedClickOutside();
const div = document.querySelector("div");
const span = document.querySelector("span");
const handler = () => console.log("extended-click-outside: handler");

extendedClickOutside.init(div, handler);
extendedClickOutside.init(span, handler, {
  useWarnings: true,
});

const quantity = extendedClickOutside.getListenersCount();
const snapshotsList = extendedClickOutside.getCurrentSnapshots();
```

## Config list

| Config name     | Config type | Config appointment                                                    | Config values          |
| --------------- | ----------- | --------------------------------------------------------------------- | ---------------------- |
| **blockKeys**   | Array       | List of keys combined with "click" event to block the listener.       | "alt", "ctrl", "shift" |
| **capture**     | Boolean     | Event "capture" flag for listener.                                    | &mdash;                |
| **passive**     | Boolean     | Event "passive" flag for listener.                                    | &mdash;                |
| **once**        | Boolean     | Registers disposable handler for element.                             | &mdash;                |
| **selfOnly**    | Boolean     | Handler will be registered only on current element (except children). | &mdash;                |
| **useWarnings** | Boolean     | Usefull internal warnings will be shown in console.                   | &mdash;                |

## License

[MIT](LICENSE)

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