Top React Hooks —File Drop, Audio and Clicks

Image for post
Image for post
Photo by zhang kaiyv 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.

The useAudio hook creates an audio element.

It tracks the state and exposes playback controls.

For instance, we can write:

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:

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:

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:

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store