Top React Hooks —File Drop, Audio and Clicks

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 useAudio hook creates an audio element.

It tracks the state and exposes playback controls.

For instance, we can write:

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

export default function App() {
  const [audio, state, controls, ref] = useAudio({
    src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
    autoPlay: true
  });

  return (
    <>
      {audio}
      <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>
    </>
  );
}

to use the useAudio hook.

The argument is the object with the audio URL and autoPlay option.

controls has the methods to control the audio playback.

state has the audio playing state.

The state includes the time, duration, paused, muted, and volume.

The useClickAway hook lets us trigger a callback when the user clicks outside the target element.

For example, we can write:

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

export default function App() {
  const ref = React.useRef(null);
  useClickAway(ref, () => {
    console.log("clicked outside");
  });

  return (
    <div
      ref={ref}
      style={{
        width: 200,
        height: 200,
        background: "green"
      }}
    />
  );
}

to use the hook.

useClickAway takes a ref for the element to watch ad a callback that runs some code when we click outside that element.

We also pass in the ref to the element we want to watch the clicks outside so that we can watch for clicks outside.

The useCss hook lets us change CSS dynamically in our app.

To use it, we can write:

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

export default function App() {
  const className = useCss({
    color: "green",
    border: "1px solid green",
    "&:hover": {
      color: "blue"
    }
  });

  return <div className={className}>Hover me</div>;
}

Then useCss hook takes an object with some styles in it.

It returns the className which we can use to style our component.

We can use the useDrop hook to get the file that’s dropped into the container.

For instance, we can write:

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

export default function App() {
  const state = useDrop({
    onFiles: files => console.log("files", files),
    onUri: uri => console.log("uri", uri),
    onText: text => console.log("text", text)
  });

  return (
    <div style={{ width: 200, height: 200, background: "orange" }}>
      Drop file here
    </div>
  );
}

The useDrop hook takes an object with some properties.

onFiles has the files object as the parameter and we can do things with it.

files has the files that have been dropped into the element.

onUri runs when we drop a URL and onText runs when we drop some text in there.

Conclusion

The react-use package has hooks to let us create audio elements, listen to clicks outside, and listen to file drops.