react-dims

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

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 .

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;

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