Top React Hooks — Drop Area, Speech, Full Screen, and Slider

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.

useDropArea

The useDropArea hook lets us listen to file drops with elements.

For example, we can write:

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

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

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

We have the useDropArea hook that returns an object that we can use as props to make an element accept files being dropped into it.

The callbacks in the object are run when those items are dropped into it.

useFullscreen

To let us toggle full-screen mode, the useFullscreen hook lets us add full screen toggling capability to our app.

For instance, we can write:

import React from "react";
import { useFullscreen, useToggle } from "react-use";

export default function App() {
  const ref = React.useRef(null);
  const [show, toggle] = useToggle(false);
  const isFullscreen = useFullscreen(ref, show, {
    onClose: () => toggle(false)
  });

  return (
    <div ref={ref} style={{ backgroundColor: "white" }}>
      <div>{isFullscreen ? "Fullscreen" : "Not fullscreen"}</div>
      <button onClick={() => toggle()}>Toggle</button>
    </div>
  );
}

We have the useToggle hook to let us toggle full screen.

The useFullscreen hook takes a ref that we want to toggle fullscreen.

show is the state of the full-screen toggle.

toggle is a function to toggle show .

isFullScreen has the full-screen state.

useSlider

The useSlider state lets us add slider behavior to any HTML element.

It supports both mouse and touch events.

For example, we can write:

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

export default function App() {
  const ref = React.useRef(null);
  const { isSliding, value, pos, length } = useSlider(ref);

  return (
    <div>
      <div ref={ref} style={{ position: "relative" }}>
        <p style={{ textAlign: "center", color: isSliding ? "red" : "green" }}>
          {Math.round(value * 100)}%
        </p>
        <div style={{ position: "absolute", left: pos }}>slide here</div>
      </div>
    </div>
  );
}

We use the useSlider hook with a ref to let us create a slide.

We pass the ref into the ref prop.

It returns an object with a few properties.

isSliding is a boolean that’s true if we’re sliding the slider.

value has the value of the slider.

pos has the position.

length has the length of the slide relative to the left.

useSpeech

useSpeech lets our app speak any text we pass into it.

For instance, we can use it by writing:

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

const voices = window.speechSynthesis.getVoices();

export default function App() {
  const state = useSpeech("a quick brow box jump over the dog", {
    rate: 0.8,
    pitch: 0.5,
    voice: voices[0]
  });

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}

To use it, we just pass in the text we want to speak as the first argument.

The 2nd argument has the voice settings.

It includes the speed, which is the rate , the pitch, and the voice to speak the text with.

It returns the state which tells us whether the text is being spoken, the rate, the pitch, and the language.

Conclusion

react-use lets us create a slider, a file drop area, toggle full screen, and speak text.