https://github.com/alexeyraspopov/use-bounding-rect

A tiny React hook to access DOM Rect of an element dynamically.
https://github.com/alexeyraspopov/use-bounding-rect

Last synced: 5 months ago
JSON representation

A tiny React hook to access DOM Rect of an element dynamically.

• Host: GitHub
• URL: https://github.com/alexeyraspopov/use-bounding-rect
• Owner: alexeyraspopov
• License: isc
• Created: 2022-06-13T16:19:32.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-06-15T00:54:12.000Z (almost 3 years ago)
• Last Synced: 2024-12-01T03:34:21.763Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.95 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-bounding-rect

    npm install use-bounding-rect

A tiny React hook to access [DOM Rect][gbcr] of an element dynamically. Uses [`ResizeObserver`][ro]

under the hood to update state.

```jsx

import { useBoundingRect } from "use-bounding-rect";

function Wrapper() {

  let ref = useRef(null);

  let rect = useBoundingRect(ref);

  return (

    


      {rect != null ?  : null}

    

  );

}

```


[gbcr]: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

[ro]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver