Top React Hooks — Vibration, Videos, and Intervals

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.

The 3rd argument indicates whether we want to loop or not.

useVideo

The useVideo hook lets us create a video element with controls.

To use it, we write:

import React from "react";
import { useVideo } from "react-use";

export default function App() {
  const [video, state, controls, ref] = useVideo(
    <video
      src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
      autoPlay
    />
  );

  return (
    <div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={controls.pause}>Pause</button>
      <button onClick={controls.play}>Play</button>
      <button onClick={controls.mute}>Mute</button>
      <button onClick={controls.unmute}>Un-mute</button>
      <button onClick={() => controls.volume(0.1)}>Volume: 10%</button>
      <button onClick={() => controls.volume(0.5)}>Volume: 50%</button>
      <button onClick={() => controls.volume(1)}>Volume: 100%</button>
      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>
      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>
      {video}
    </div>
  );
}

to use the hook.

The useVideo takes a component for rendering the video.

And it returns an array with various variables.

video has the video player component itself.

state has the video playing state.

The state has the time which is the time that the video is at.

duration has the duration of the video.

paused indicates whether the video is paused or not.

muted indicates whether the video is muted or not.

controls has the method to let us control the video.

useRaf

The useRaf hook lets us force a component to render on each requestAnimationFrame .

It returns the percentage of time elapsed.

To use it, we can write:

import React from "react";
import { useRaf } from "react-use";

export default function App() {
  const elapsed = useRaf(15000, 1000);

  return <div>Elapsed: {elapsed}</div>;
}

We have the useRaf hook with 2 arguments.

The first is the animation duration.

The 2nd is the delay after which to start re-rendering the component.

They’re both in milliseconds.

useInterval

The useInterval hook lets us run a piece of code periodically.

To use it, we can write:

import React from "react";
import { useInterval, useBoolean } from "react-use";

export default function App() {
  const [count, setCount] = React.useState(0);
  const [isRunning, toggleIsRunning] = useBoolean(true);

  useInterval(
    () => {
      setCount(count + 1);
    },
    isRunning ? 1000 : null
  );

  return (
    <div>
      <h1>count: {count}</h1>
      <div>
        <button onClick={toggleIsRunning}>
          {isRunning ? "stop" : "start"}
        </button>
      </div>
    </div>
  );
}

We use the useInterval hook with 2 arguments.

The callback that runs periodically is the first argument.

The 2nd argument is the length between each callback call.

If it’s null , then the callback isn’t run.

Conclusion

The react-use library lets us run code periodically, re-render during each requestAnimationFrame call, vibrate our device, and display videos.