Top React Hooks — Outside Clicks and Dimensions

Photo by Free To Use Sounds on Unsplash

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

React Cool Dimensions

React Cool Dimensions lets us watch the dimension of a component.

To use it, we install it by running:

yarn add react-cool-dimensions

or

npm install --save react-cool-dimensions

Then we can use it by writing:

import React from "react";
import useDimensions from "react-cool-dimensions";
export default function App() {
  const { ref, ...dimensions } = useDimensions({
    onResize: ({ width, height, entry, unobserve, observe }) => {
      //...
    }
  });
  return (
    <div className="App">
      <div ref={ref}>{JSON.stringify(dimensions)}</div>
    </div>
  );
}

We use the useDimensions hook which returns the ref that we can assign to the element we want to watch the size for.

Then dimensions has the object with width and height of the element we’re watching.