JS Class For Window Resize Events Management – Resizer

Category: Javascript | May 2, 2023
Author:chenziappu
Views Total:38 views
Official Page:Go to website
Last Update:May 2, 2023
License:MIT

Preview:

JS Class For Window Resize Events Management – Resizer

Description:

Resizer.js is a tiny JavaScript class that allows developers to register callback functions that will be called automatically when the window size changes.

Additionally, it offers convenient methods for obtaining the current window size and device pixel ratio, enabling developers to create adaptable and responsive designs easily.

How to use it:

1. Download and import the Resize module.

<script type="module">
  import Resizer from './src/Resizer.js';
</script>

2. Initialize a new Resizer instance.

const myResizer = new Resizer();

3. Register a callback that will be fired on window resize.

// myResizer.add(handler, priority)
resizer.add(({ width, height, dpr }) => {
  console.log(`Window size changed to ${width}x${height} at ${dpr}x DPR.`);
});

4. Get the current window size and device pixel ratio.

myResizer.get({ width, height, dpr});

5. Remove the callback.

const myId = resizer.add((data) => {
      console.log(data);
});
resizer.remove(id);

6. Destroy the instance and remove all event listeners.

resizer.dispose();

Changelog:

05/02/2023

  • v1.0.1

You Might Be Interested In:


Leave a Reply