Top React Hooks — Vibration, Videos, and Intervals

Photo by Jakob Owens 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.

useVibrate

The useVibrate hook lets us vibrate our device on any device that’s capable of this.

For instance, we can use it by writing:

import React from "react";
import { useToggle, useVibrate } from "react-use";
export default function App() {
  const [vibrating, toggleVibrating] = useToggle(false);
  useVibrate(vibrating, [360, 120, 260, 110, 1420, 300], false);
  return (
    <div>
      <button onClick={toggleVibrating}>
        {vibrating ? "Stop" : "Vibrate"}
      </button>
    </div>
  );
}

We have the useToggle hook to toggle the vibration.

The useVibrate hook takes the vibrating state that we created earlier.

The array has the array with the magnitude of the vibrations in each entry.