JS Class For Window Resize Events Management – Resizer

Preview:

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