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.

onResize is a method that runs when we resize the element.

We can also assign breakpoints so the hook can determine the breakpoint when watching the element size.

For instance, we can write:

import React from "react";
import useDimensions from "react-cool-dimensions";
export default function App() {
const { ref, ...dimensions } = useDimensions({
breakpoints: { XS: 0, SM: 320, MD: 480, LG: 640 },
onResize: ({ currentBreakpoint }) => {
console.log(currentBreakpoint);
}
});
return (
<div className="App">
<div ref={ref}>{JSON.stringify(dimensions)}</div>
</div>
);
}

We added the breakpoints property to get the breakpoints according to what we assigned.

All the dimensions are in pixels.

We can include the border size with the measurement.

For instance, we can write:

import React from "react";
import useDimensions from "react-cool-dimensions";
export default function App() {
const { ref, ...dimensions } = useDimensions({
useBorderBoxSize: true
});
return (
<div className="App">
<div
ref={ref}
style={{
border: "5px solid grey"
}}
>
{JSON.stringify(dimensions)}
</div>
</div>
);
}

Then the border is included with the measurements.

To throttle the watching, we can throttle the onResize callback calls with the Lodash throttle method.

We can also create our own ref and pass it into the useDimensions hook’s object argument’s ref property.

React Cool Onclickoutside

React Cool Onclickoutside lets us detect clicks outside an element.

To install it, we run:

yarn add react-cool-onclickoutside

or:

npm install --save react-cool-onclickoutside

Then we can use it by writing:

import React from "react";
import useOnclickOutside from "react-cool-onclickoutside";
export default function App() {
const [openMenu, setOpenMenu] = React.useState(false);
const ref = useOnclickOutside(() => {
setOpenMenu(false);
});
const handleClickBtn = () => {
setOpenMenu(!openMenu);
};
return (
<div>
<button onClick={handleClickBtn}>Button</button>
{openMenu && <div ref={ref}>Menu</div>}
</div>
);
}

useOnclickOutside is the hook that comes with the package to detect clicks outside an element.

It returns a ref which we can pass into the ref prop of the element we want to watch the clicks outside for.

Now when we click outside the menu div, the menu will disappear.

Photo by Cristina Anne Costello on Unsplash

Conclusion

React Cool Dimensions lets us watch the dimensions of our elements.

React Cool Onclickoutside lets us detect clicks that are outside an element.

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store