react-size-reporting-div v1.0.6
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:
timeout:
time (in milliseconds) to use for debouncing or throttling
style:
style to be applied to the DIV element
Any props available to div elements will be applied as well
License
https://choosealicense.com/licenses/mit/
Contributors
rlemiengre
https://github.com/rlemiengre