@rooks/use-boundingclientrect

Note: Future updates to this package have moved to the main package rooks. All hooks now reside in a single package which you can install using

``
npm install rooks
`

or

`
yarn add rooks
`

Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!

Note: Future updates to this package have moved to the main package rooks. All hooks now reside in a single package which you can install using

`
npm install rooks
`

or

`
yarn add rooks
`

Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!

!TitleCard

!Build Status![](https://img.shields.io/npm/v/@rooks/use-boundingclientrect/latest.svg) ![](https://img.shields.io/npm/l/@rooks/use-boundingclientrect.svg) ![](https://img.shields.io/npm/dt/@rooks/use-boundingclientrect.svg) ![](https://img.shields.io/david/imbhargav5/rooks.svg?path=packages%2Fboundingclientrect)

About

`
npm install --save @rooks/use-boundingclientrect
`

Importing the hook

`javascript
import useBoundingclientrect from "@rooks/use-boundingclientrect"
`

Usage

`jsx
function Demo() {
const myRef = useRef();
const getBoundingClientRect = useBoundingclientrect(myRef);
const [XOffset, setXOffset] = useState(0);
const [YOffset, setYOffset] = useState(300);
const displayString = JSON.stringify(getBoundingClientRect, null, 2);
return (
<>
style={{
width: 300,
background: "lightblue",
padding: "10px",
position: "absolute",
left: XOffset,
top: YOffset
}}
ref={myRef}
>
style={{
resize: "both",
overflow: "auto",
background: "white",
color: "blue",
maxWidth: "100%"
}}
>



Resize this div as you see fit. To demonstrate that it also updates
on child dom nodes resize