Top React Hooks — Hover, Full Screen, Events, and Geolocation

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 Recipes

React Recipes comes with many hooks that we can use to do various things.

The useEventListener hook lets us listen to various events easily within our React component.

To use it, we can write:

import React, { useState, useCallback } from "react";
import { useEventListener } from "react-recipes";

export default function App() {
  const [coords, setCoords] = useState({ x: 0, y: 0 });

  const handler = useCallback(
    ({ clientX, clientY }) => {
      setCoords({ x: clientX, y: clientY });
    },
    [setCoords]
  );

  useEventListener("mousemove", handler);

  return (
    <p>
      The mouse position is ({coords.x}, {coords.y})
    </p>
  );
}

We use the useState hook to set the initial mouse coordinates.

Then we added a callback to the useCallback hook that’s used as the mousemove event listener.

Then we pass that handler to the useEventListener hook.

useEventListener takes an optional 3rd argument for the element to listen to.

The default value is window .

Then we get the mouse coordinates from the coords state.

useFullScreen is a gook that lets us determine and toggle if the screen or element is in full-screen mode.

We can use it by writing:

import React from "react";
import { useFullScreen } from "react-recipes";

export default function App() {
  const { fullScreen, toggle } = useFullScreen();

  return (
    <>
      <button onClick={toggle}>Toggle Full Screen</button>
      <p>{fullScreen.toString()}</p>
    </>
  );
}

We used the useFullScreen hook to return an object with the toggle function.

It lets us toggle full-screen mode.

It also returns the fullScreen property to indicate if the document is full screen.

open lets us open full-screen mode.

close lets us close full-screen mode.

The useGeolocation hook lets us get and watch the geolocation of a user.

To use it, we can write:

import React from "react";
import { useGeolocation } from "react-recipes";

export default function App() {
  const { latitude, longitude, timestamp, accuracy, error } = useGeolocation(
    true
  );

  return (
    <p>
      latitude: {latitude}
      longitude: {longitude}
      timestamp: {timestamp}
      accuracy: {accuracy && `${accuracy}m`}
      error: {error}
    </p>
  );
}

We use the useGeolocation with the argument true to indicate that we want to follow the location.

It also takes a second argument with some options.

We can enable high accuracy, set timeout, and set the max-age for caching.

It returns an object with the latitude, longitude, timestamp, accuracy, and error.

The useHover hook lets us know when the most is hovering over an element.

To use it, we can write:

import React from "react";
import { useHover } from "react-recipes";

export default function App() {
  const [hoverRef, isHovered] = useHover();

  return <div ref={hoverRef}>{isHovered.toString()}</div>;
}

We call the useHover hook in our component, which returns 2 things.

The hoverRef is a ref that we pass into the component we want to watch.

isHovered indicates whether we hovered over the element we’re watching.

Conclusion

React Recipes comes with hooks for helping us get geolocation data, watching hovering, toggling full screen, and more.