mya-ake / window-resize-subject

Handler for the window resize event of the observer pattern

window-resize-subject

Handler for the window resize event of the observer pattern.

Install

npm

$ npm i window-resize-subject

yarn

$ yarn add window-resize-subject

Usage

import { WindowResizeSubject } from 'window-resize-subject';

// create subject
const subject = new WindowResizeSubject();

// add observer
const observer = ({ width, height }) => {
  // do something
};
subejct.addObserver('name', observer);

// start watching the resize event
subject.subscribe();

note: You can also write in a method chain

subejct.addObserver('name', observer).subscribe();

Methods

addObserver

• params:
  • name:
    • type: string | Symbol
  • observer:
    • type: WindowResizeObserver
      • details: (event: { width: number, height: number }) => void

Add observer.
And called with the current window size.

subejct.addObserver('name', ({ width, height }) => {
  // do something
});

subscribe

Start watching the resize event.

unsubscribe

Stop watching the resize event.

note: observer is not deleted.

notifyObservers

• params:
  • size:
    • type: Object
      • width: number
      • height: number

Force update.

subject.notifyObservers({ width: 800, height: 600 });

deleteObserver

• params:
  • name:
    • type: string | Symbol

Deletes the specified Observer.

subject.deleteObserver('name');

deleteObservers

Deletes all Observers.

setDelay

• params:
  • type: number

Changes the delay time for a resize event.

subject.setDelay(100);

hasObserver

returns true if it has an observer.

dispatch

Dispatches the current window size.

Options

delay (option)

• type: number
• default: 33

Changes the delay time for a resize event.

import { WindowResizeSubject } from 'window-resize-subject';

const subject = new WindowResizeSubject({ delay: 100 });

Contribution

If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.

License

MIT