Ruben Lemiengre - RedHot Coding
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.
Use the package manager npm to install react-size-reporting-div.
>> npm install --save react-size-reporting-div
Check out a working demo on CodeSandbox.
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>
</>
);
}
-
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
https://choosealicense.com/licenses/mit/
rlemiengre
https://github.com/rlemiengre