Top React Hooks — Clipboard, APIs, and Forms

Image for post
Image for post
Photo by Rosie Kerr 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-clipboard

The react-use-clipboard library provides us with copy to clipboard functionality.

To install it, we run:

or

Then we can use it by writing:

We use the useClipboard hook with a string argument to let us copy it to the clipboard.

isCopied is a boolean to indicate whether it’s copied or not.

setCopied lets us copy the text to the clipboard.

We can reset the isCopied state after a period of time.

To do that, we can pass an object into the 2nd argument with the successDuration property:

The number is in milliseconds.

react-use-data-loader

The react-use-data-loader library lets us load data with logic outside our component.

To install it, we run:

or:

Then we can use it by writing;

We have the getData function which returns a promise with the response body.

Then we can pass that into the useDataLoader hook so that we can get the data we want with it.

The 2nd argument of the hook is passed to the parameter of the getData function.

It returns the data , error , loading and retry properties.

data has the resolved data.

error has the errors object.

loading has the loading state.

react-use-form-state

The react-use-form-state library lets us create forms without hassle.

To install it, we run:

Then we can use it by writing:

We use the useFormStare hook to create our form.

It returns an object with the formState with the form’s state, including the values, pristine, dirty, etc.

text , email , password , and radio are functions that we can call to add the type of input with the given name.

It returns an object with the value and form handler, which we can use in our input.

The first argument of these functions are the value of the name attribute.

The 2nd argument is the value of the value attribute.

Then we can get the form values with the formState.values .

Image for post
Image for post
Photo by Bethany Cirlincione on Unsplash

Conclusion

react-use-clipboard lets us copy data to the clipboard.

react-use-data-loader lets us load data from APIs with ease.

react-use-form-state lets us create forms without the usual hard work.

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