react-dims
v1.1.2
A React hook that gives you the dimensions of any React element in your app.
0/weekUpdated 3 years agoISCUnpacked: 16.6 KB
Published by David O'Donovan
React Dims
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 (
className="myCanvas"
>
My height is: {dims.height}
My width is: {dims.width}
);
};
`
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
}
$3
If you are interested in learning how to create responsive d3.js charts, see this medium article, which will walk you through your first responsive d3 chart inside of React! 👍