A React hook that gives you the dimensions of any React element in your app.

A React hook that gives you the dimensions of any element in your layout. Tooooo easy!
NOTE: 14 Apr 2021 ~ react-dims now exports the useDims() hook ~ much nicer to 'use'... 👍
#### Installation
``code`
npm i react-dims
#### Simple Use Case
`code
import { useDims } from 'react-dims';
const Dashboard=()=>{
const [domNode, dims] = useDims();
return (
`
See example here on github .
Invoke useDims( ) inside any React JSX element and it will give you it's width, height, plus x and y coordinates.
Very useful for making responsive d3.js charts that live inside responsive grid containers. Use multiple times for all components inside responsive dashboards.
When the element is resized, the hook fires again, making your element immediately aware of what it's new dimensions are.
Requires React version 16.8.0 or greater.
This hook leverages the native getBoundingClientRect() method, so dims will be an object that looks something like this;
`code``
{
bottom: 113,
height: 160,
left: 213.015625,
right: 286.96875,
top: 97,
width: 73.953125,
x: 213.015625,
y: 97
}