Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

resizilla

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

resizilla

A Better Window Resize

  • 0.9.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

img

resizilla

A Better Window Resize

Why?
  • When the user resizes a range of events are fired when using: window.onresize & window.addEventListener(). Resizilla reduces the frequency of calls using a debounce algorithm for better performance.
  • Supports orientation change.
  • Built in destroy method that removes eventListeners.
  • full control

How?
via npm
npm i resizilla --save
yarn add resizilla

Usage:

resizilla(handler, delay, incept);

  • handler: Function to execute on resize
  • delay: Delay of the function call in ms on resize
  • incept: If true the function call at the beginning of the detection period, if false the call will be at the end of the detection period (false by default)

also

resizilla(
   handler,           -  Function
   delay,             -  Number (Milliseconds)
   incept,            -  Boolean
   useCapture,        -  Boolean
   orientationChange  -  Boolean
);
  • useCapture: Register the event handler for the capturing/ bubbling phase.
  • orientationChange: See below...

Tested browsers:
  • Chrome 14+
  • Safari 5.1+
  • Firefox 4+
  • Opera 10.6+
  • IE9+
  • Edge
  • iPhone 3GS+
  • iPad 2+
  • Android 2.2+
  • Windows Phone 8.1+

Mobile:

By default, resizilla calls the handler when the "orientationchange" event is fired. This can be disabled using

    orientationChange: false

Destroy:

Remove the internal event listeners by using the below:

const {destroy} = resizilla(...);

// Destroy all.
destroy();

// Destroy resize
destroy('resize');

// Destroy orientationchange
destroy('orientationchange');

And reuse resizilla at any point in time.


The example:

The current example only needs to reveal the transition of the debounce to satisfy as working.

So no element resize support?

To detect changes that occur with elements checkout getComputedStyle, transitionEnd & MutationObserver.

(Original ASCII art by Mozilla, of course)

Big thanks to BrowsreStack for sponsoring this project via cross browser testing.

MIT License

Copyright (c) 2017 Julien Etienne

Keywords

FAQs

Package last updated on 06 Apr 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc