Wondering what’s next for npm?Check out our public roadmap! »

    react-dims

    1.1.2 • Public • Published

    React Dims

    A React hook that gives you the dimensions of any element in your layout. Tooooo easy!

    Maintenance Status

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

    Install

    npm i react-dims

    DownloadsWeekly Downloads

    10

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    16.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar