# ui-event-performance

> Optimised way to subscribe to browser DOM UI Events using requestAnimationFrame.

Latest version **2.1.0** (published 2021-04-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install ui-event-performance
pnpm add ui-event-performance
yarn add ui-event-performance
bun add ui-event-performance
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2021-04-27 |
| First published | 2019-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nghiep |
| Maintainers | nghiepit |
| Keywords | resize, scroll, requestAnimationFrame, CustomEvent |

## Links

- npm: https://www.npmjs.com/package/ui-event-performance
- Repository: https://github.com/nghiepit/ui-event-performance
- Issues: https://github.com/nghiepit/ui-event-performance/issues
- npm.io page: https://npm.io/package/ui-event-performance

## Dependencies (1)

- [custom-event-polyfill](https://npm.io/package/custom-event-polyfill.md) ^1.0.7

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 2.1.0 (latest) — 2021-04-27
- 2.0.0 — 2021-04-04
- 0.1.2 — 2019-08-09
- 0.1.1 — 2019-05-19
- 0.1.0 — 2019-02-24

## README

# ui-event-performance

[![NPM version](https://img.shields.io/npm/v/ui-event-performance.svg)](https://www.npmjs.com/package/ui-event-performance)
[![NPM monthly download](https://img.shields.io/npm/dm/ui-event-performance.svg)](https://www.npmjs.com/package/ui-event-performance)

> Optimised way to subscribe to browser DOM UI Events using requestAnimationFrame.

Since resize/scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using `requestAnimationFrame`.

Refer documentation:
https://developer.mozilla.org/en-US/docs/Web/Events/resize#requestAnimationFrame_customEvent

## Installation

```bash
yarn add ui-event-performance
```

## Usage

```ts
import {subscribeEvent} from 'ui-event-performance';

// window event listener
const unsubscribeEvent = subscribeEvent('resize', 'optimizedResize');
window.addEventListener('optimizedResize', () => {
  console.log('Resource conscious resize callback!');
});

// with DOM element listener
const wrapperElement = document.querySelector('#my-wrapper');
const handleScroll = () => {
  console.log('Wrapper is scrolling');
};
const unsubscribeEvent = subscribeEvent(
  'scroll',
  'optimizedScroll',
  wrapperElement
);
wrapperElement.addEventListener('optimizedScroll', handleScroll);

// remove event listener
wrapperElement.removeEventListener('optimizedScroll', handleScroll);

// unsubscribe event
unsubscribeEvent();
```

## License

MIT

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