resize-xy

Custom event for detect individually resizes on horizontal(x) or vertical (y). Useful f

Motivation

The default resize event triggers whenever an horizontal or vertical changes occurs. Many mobile devices like Android and iOS triggers vertical resize events while the user scrolls, so if you need watch horizontal change, its necessary manually check if the window size has really changed.

Browser support

Make sure you are using:

• ES6 Transpiler
• For IE9: custom-event-polyfill

Simple use case

// Simple case
import resizeXY from 'resize-xy';

// Attach the plugin on `window`:
window.addEventListener('resize', resizeXY());

// Attach your events to `window`
window.addEventListener('resize-x', (event) => {
  console.log(`Changed X from ${event.detail.oldValue} to ${event.detail.newValue}`)
});

window.addEventListener('resize-y', (event) => {
  console.log(`Changed Y from ${event.detail.oldValue} to ${event.detail.newValue}`)
});

Options

const options = {
  namespace: '',
  interval: 500
};

window.addEventListener('resize', resizeXY(options));

options.namespace

Allow define custom namespace for the event, if value is 'myCustomNamespace-', then, you should listen for myCustomNamespace-resize-x and myCustomNamespace-resize-y

options.interval

Interval between multiple resize events.