react-size-reporting-div

Version

Author

Ruben Lemiengre - RedHot Coding

Description

A React component which renders a DIV element with the provided content inside it and reports the width and height of the content to a callback function whenever the size of the DIV is changed.

• The component is customizable with style and reporting mode for performance (none, debounce, throttle).

• It takes advantage of the ResizeObserver Web API to detect the size changes.

Installation

Use the package manager npm to install react-size-reporting-div.

>> npm install --save react-size-reporting-div

Demo

Check out a working demo on CodeSandbox.

Basic usage

import { SizeReportingDiv } from "react-size-reporting-div";
import { useState } from "react";

const MyComponent = (props) => {
  return (
    <div
      style={{
        height: "100%",
        width: "100%"
      }}
    >
      <SizeReportingDiv
        onSizeUpdated={props.onSizeUpdated}
        style={{
          width: "100%",
          height: "100px",
          resize: "vertical",
          overflow: "auto",
          backgroundColor: "grey",
          color: "white",
          padding: "5px"
        }}
        reportingMode="debounce"
        timeout={500}
      >
        <p>resize me!</p>
      </SizeReportingDiv>
    </div>
  );
};

export default function App() {
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  const _onSizeUpdated = (width, height) => {
    setWidth(width);
    setHeight(height);
  };
  return (
    <>
      <div>
        DIV width: {width} DIV height: {height}
      </div>
      <div className="App">
        <MyComponent onSizeUpdated={_onSizeUpdated} />
      </div>
    </>
  );
}

Props

• onSizeUpdated:

  callback function, triggered when the DIV element is resized

  syntax:

  function updateSize(width, height) {
     ...
  }

• reportingMode:

  • throttle (default):

    the callback function will be triggered every [timeout] milliseconds during resizing

  • debounce:

    the callback function will be triggered only after resizing has stopped for [timeout] milliseconds

  • none: the callback function will be triggered continuously during resizing

• timeout:

  time (in milliseconds) to use for debouncing or throttling

• style:

  style to be applied to the DIV element

• [standard div props]:

  Any props available to div elements will be applied as well

License

https://choosealicense.com/licenses/mit/

Contributors

rlemiengre
https://github.com/rlemiengre