Wondering what’s next for npm?Check out our public roadmap! »

    simple-element-resize-detector
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/simple-element-resize-detector package

    1.3.0 • Public • Published

    simple-element-resize-detector NPM

    Observes resizing of an element using a hidden iframe.

    JSFiddle Demo

    Installation

    npm i -S simple-element-resize-detector

    Usage

    import observeResize from 'simple-element-resize-detector';
     
    // any DOM element that can have children
    let element = document.createElement('div');
     
    // listen for resize
    observeResize(element, () => {
        console.log('new size: ', {
            width: element.clientWidth,
            height: element.clientHeight
        });
    });

    To stop observing resize events, simply remove the returned detector frame:

    let detector = observeResize(el, () => {});
     
    detector.remove();
     
    // or, for better browser compatibility:
    // detector.parentNode.removeChild(detector)

    Notes

    • element passed to observeResize() must have position: relative style to be correctly observed, otherwise nearest relative ancestor will be observed instead.
    • This library uses <iframe>s to detect when an element resizes. <iframe>s are heavy objects are usually take good amount of memory. Be careful and don't abuse it.

    License

    MIT

    Install

    npm i simple-element-resize-detector

    DownloadsWeekly Downloads

    1,819

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    6.03 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar