{"repo":"FezVrasta/react-resize-aware","free":true,"listed":false,"github":"https://github.com/FezVrasta/react-resize-aware","clone":"git clone https://github.com/FezVrasta/react-resize-aware.git","description":"⇲👁 A simple React Hook which allows to listen the resize event of any target element when it changes sizes","language":"JavaScript","stars":566,"topics":["resize-events","sizes","listen","react"],"license":"MIT","category":"ui-components","readme_excerpt":"react-resize-aware It does one thing, it does it well: listens to resize events on any HTML element. react-resize-aware is a zero dependency, 600 bytes React Hook you can use to detect resize events without relying on intervals, loops, DOM manipulation detection or CSS redraws. It takes advantage of the resize event on the HTMLObjectElement , works on any browser I know of, and it's super lightweight. In addition, it doesn't directly alters the DOM, everything is handled by React. Looking for the 2.0 docs? Click here Installation or with npm: Usage The API is simple yet powerful, the useResizeAware Hook returns a React node you will place inside the measured element, and an object containing its sizes: Heads up! : Make sure to assign a position != initial to the HTMLElement you want to target ( relative , absolute , or fixed will work). API The Hook returns an array with two elements inside: [resizeListener, ...] (first element) This is an invisible React node that must be placed as direct-child of the HTMLElement you want to listen the resize events of. The node is not going to interfer with your layouts, I promise. [..., sizes] (second element) This object contains the width and height properties, it could be null if the element is not yet rendered. Custom reporter You can customize the properties of the sizes object by passing a custom reporter function as first argument of useResizeAware . The above example will report the clientWidth rather than the default offsetWidth a","default_branch":null,"files":null,"tree":[],"storefront":"/r/FezVrasta","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/FezVrasta/react-resize-aware/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}