Neverending Perpetual Motion

    react-resize-listener

    0.3.6 • Public • Published

    React Resize Listener

    Demo

    Check out the demo.

    Installation

    npm i react-resize-listener

    Usage

    This component uses an <iframe /> component under the hood that is positioned absolutely to fill a container to listen for resize events on its contentWindow.

    Be sure to set position: relative; on the parent container that you want to listen on, and be aware of any other positioned containers that might be in between.

    Debug mode

    You can add debug to the ResizeListener component to show an outline around the resize listener container, and it will automatically console.log() every time the onResize event fires. This can be useful if you aren't sure whether the listener is filling the container you think it is.

    Example

     
    import React, {Component} from "react";
    import {ResizeListener} from "react-resize-listener";
     
    const ResizableComponent = (props) => (
      <div className="might-resize" style={{position: "relative"}}>
        <p>
          This container might resize for whatever reason, and
          we might want to know when it does and the dimensions
          when it does
        </p>
        <ResizeListener debug onResize={props.doSomething} />
      </div>
    )
     

    Install

    npm i react-resize-listener

    DownloadsWeekly Downloads

    231

    Version

    0.3.6

    License

    MIT

    Last publish

    Collaborators

    • third774