Installation

npm i react-dims

Simple Use Case

import { useDims } from 'react-dims';

const Dashboard=()=>{

  const [domNode, dims] = useDims();

  return (
    <div
      ref={domNode}
      className="myCanvas"
      >
      My height is: {dims.height}
      <br/>
      My width is: {dims.width}
    </div>
    );
};

See example here on github .

This hook leverages the native getBoundingClientRect() method, so dims will be an object that looks something like this;

{
  bottom: 113,
  height: 160,
  left: 213.015625,
  right: 286.96875,
  top: 97,
  width: 73.953125,
  x: 213.015625,
  y: 97
}

A Guide for Responsive d3.js Charts

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! 👍