https://github.com/daun/resize-start-stop

Debounced `resizestart` and `resizestop` events on the window
https://github.com/daun/resize-start-stop

debounce events javascript resize resizestart resizestop window

Last synced: 18 days ago
JSON representation

Debounced `resizestart` and `resizestop` events on the window

• Host: GitHub
• URL: https://github.com/daun/resize-start-stop
• Owner: daun
• License: mit
• Created: 2020-07-27T18:37:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-01T10:25:01.000Z (over 4 years ago)
• Last Synced: 2024-05-05T09:33:15.381Z (8 months ago)
• Topics: debounce, events, javascript, resize, resizestart, resizestop, window
• Language: JavaScript
• Size: 25.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# resizestart & resizestop events

[![NPM version](https://img.shields.io/npm/v/resize-start-stop)](https://www.npmjs.com/package/resize-start-stop)

[![Bundle size](https://img.shields.io/bundlephobia/minzip/resize-start-stop?label=size)](https://bundlephobia.com/result?p=resize-start-stop)

[![GitHub license](https://img.shields.io/github/license/daun/resize-start-stop)](./LICENSE)

![Travis Build](https://img.shields.io/travis/com/daun/resize-start-stop)

![Codecov](https://img.shields.io/codecov/c/github/daun/resize-start-stop)

Debounced resize events: know when a user started or stopped resizing the window.

## Why would I need this?

![Debounce](./docs/debounce.svg)

The window's `resize` event is triggered continously and often. That's bad news

for performance. In most cases, what we really want to know is when the user has started or stopped resizing the window.

## What does it do?

This package will trigger debounced resize events on the window. Simply replace

your old `resize` event listeners with more performant `resizestart` and

`resizestop` listeners.

## Installation

```bash

npm install resize-start-stop

```

## Usage

Import and call `bindResizeEvents()` to install debounced `resizestart` and

`resizestop` events on the window.

```js

import { bindResizeEvents } from 'resize-start-stop'

bindResizeEvents()

window.addEventListener('resizestart', () => { console.log('Resizing') })

window.addEventListener('resizestop', () => { console.log('Resized') })

```

### Toggle class name during resize

The package includes a helper for the most common use case: toggling a class

name on the `html` element during resize. Great for disabling transitions

and animations while crossing breakpoint boundaries.

```js

import { toggleClassDuringResize } from 'resize-start-stop'

toggleClassDuringResize()

```

```css

html.is-resizing * {

  transition: none !important;

}

```

All options and their defaults:

```js

toggleClassDuringResize({

  className: 'is-resizing',

  element: document.documentElement,

  wait: 200

})

```

### Cleaning up

If you don't need the installed events anymore, import and call

`unbindResizeEvents()`.

```js

import { bindResizeEvents, unbindResizeEvents } from 'resize-start-stop'

// Bind events

bindResizeEvents()

// Unbind at later stage

unbindResizeEvents()

```

### In the browser

If you don't have the luxury of using a bundler, you can also

simply include the script tag and call it a day.

```html

  resizeStartStop.bindResizeEvents()

```

## License

[MIT](https://opensource.org/licenses/MIT)