Top React Hooks — Idleness, Geolocation, and Hashes

GPhoto by Ehimetalor Akhere Unuabona 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-use

The react-use library is a big library with many handy hooks.

The useGeolocation hook lets us get the location data within our React app.

We can use it by writing:

import React from "react";
import { useGeolocation } from "react-use";
export default function App() {
  const state = useGeolocation();
  return <>{JSON.stringify(state)}</>;
}

We use the useGeolocation to get various pieces of data.

It includes the accuracy, latitude, longitude, altitude, speed, and loading state.

The useHover and useHoverDirty gooks lets us watch for hovering of an element.

To use the useHover hook, we can write:

import React from "react";
import { useHover } from "react-use";
export default function App() {
  const element = hovered => <div>Hover me {hovered.toString()}</div>;
  const [hoverable, hovered] = useHover(element);