paint-brush
React Hook to Measure an Element's Size and Handle Responsive Componentsby@welly
6,214 reads
6,214 reads

React Hook to Measure an Element's Size and Handle Responsive Components

by wellyMay 28th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

React Hook to Measure an Element's Size and Handle Responsive Components. Measure an element's size and handle responsive components with highly-performant way, using ResizeObserver. Use this hook to report the size of an element by the width and height states. Try yourself: https://://react-cool-dimensions.netlify.app.com/wellyshen/react-Cool-Dimensions. The project's GitHub page: http://://://www.genev.org/recreate-cool/dimensions-a-can-be-done-to-use-the-latest-react-hook.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - React Hook to Measure an Element's Size and Handle Responsive Components
welly HackerNoon profile picture

react-cool-dimensions is a React hook that measure an element's size and handle responsive components with highly-performant way, using ResizeObserver. Try it you will ❤️ it!

⚡️ Try yourself: https://react-cool-dimensions.netlify.app

Features

Usage

react-cool-dimensions has a flexible API design, it can cover simple to complex use cases for you. Here are some examples to show you how does it work.

Basic Use Case

To report the size of an element by the width and height states. Please note, it reports the content rectangle of the element.

import useDimensions from "react-cool-dimensions";

const App = () => {
  const { observe, unobserve, width, height, entry } = useDimensions({
    onResize: ({ observe, unobserve, width, height, entry }) => {
      // Triggered whenever the size of the target is changed...

      unobserve(); // To stop observing the current target element
      observe(); // To re-start observing the current target element
    },
  });

  return (
    <div ref={observe}>
      Hi! My width is {width}px and height is {height}px
    </div>
  );
};

Responsive Components

We have media queries but those are based on the browser viewport not individual elements. In some cases, we'd like to style components based on the width of a containing element rather than the browser viewport. To meet this demand there's a proposal for container queries, but it still doesn't exist today...

No worries, react-cool-dimensions provides an alternative solution for us! We can activate the responsive mode by the breakpoints option. It's a width-based solution, once it's activated we can easily apply different styles to a component according to the currentBreakpoint state. The overall concept as below.

import useDimensions from "react-cool-dimensions";

const Card = () => {
  const { observe, currentBreakpoint } = useDimensions({
    // The "currentBreakpoint" will be the object key based on the target's width
    // for instance, 0px - 319px (currentBreakpoint = XS), 320px - 479px (currentBreakpoint = SM) and so on
    breakpoints: { XS: 0, SM: 320, MD: 480, LG: 640 },
    // Will only update the state on breakpoint changed, default is false
    updateOnBreakpointChange: true,
    onResize: ({ currentBreakpoint }) => {
      // Now the event callback will be triggered when breakpoint is changed
      // we can also access the "currentBreakpoint" here
    },
  });

  return (
    <div class={`card ${currentBreakpoint}`} ref={observe}>
      <div class="card-header">I'm 😎</div>
      <div class="card-body">I'm 👕</div>
      <div class="card-footer">I'm 👟</div>
    </div>
  );
};

Thanks for reading, for more usage details check out the project's GitHub page: https://github.com/wellyshen/react-cool-dimensions

You can also install this package is distributed via npm.

$ yarn add react-cool-dimensions
# or
$ npm install --save react-cool-dimensions