A hook that uses Resize Observer API to monitor changes in the size of an element.
npm install resize-observer-hook
import React from 'react'
import useResizeObserver from 'resize-observer-hook'
const App = () => {
const [ref, width, height] = useResizeObserver()
return (
<div ref={ref}>
{width} X {height}
</div>
)
}
You can add multiple ResizeObserverBoxOptions
to the useResizeObserver like this ->
const [ref,width,height] = useResizeObserver("borderBoxSize");
ResizeObserverBoxOptions
that are supported currently in the library ->
- borderBoxSize
- contentBoxSize
- contentRect
Note contentRect
to calculate height and width of the observed element.
See more details over here -> https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry
You can help this library to grow by contributing here. Pick any issue or open one. Let us know what you are working on and ask your questions in the issues itself :)
The package is made up of 2 main folders:
- /src contains all the resize-observer-hook code
- /example is our create-react-app based demo website
To setup and run a local copy:
- Clone this repo with
https://github.com/Gautam-Arora24/resize-observer-hook.git
- Run
npm install
in the root folder - Run
npm install
in the example folder - In seperate terminal window, run
npm start
in the root. - In seperate terminal window, run
npm start
in the example folder.
When you're done working on your changes, submit a PR with the details and include a screenshot if you've changed anything visually.
MIT © Gautam-Arora24, and the contributors.
Thanks goes to these wonderful people (emoji key):
Gautam Arora 💻 |
mehan 🎨 |
Nikhil Maske 💻 |
Batman09 📖 |
Keshav 📖 |
gim 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!