Top React Hooks — Calendar, Form, and API

Image for post
Image for post
Photo by Estée Janssens 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-uniformed

The react-uniformed package lets us create forms with ease.

To install it, we run:

or:

to install it.

Then we can use it by writing:

We created a basic form with the form element.

The useForm hook takes an object with the onSubmit method.

data has the data we submit.

The object it returns has the setValue , values , and submit properties.

setValue is used with the useSettersAsEventHandler hook to get the change handler function.

The submit function is passed into the submit prop.

React Use API

React Use API is another library that lets us make HTTP requests cleanly.

To use it, we run:

or:

to install it.

Then we can use it by writing:

index.js

App.js

We import the ApiProvider that wraps around the App component.

Then we can use the useApi hook by passing in an object with the url to the API.

That returns the data , loading , error and request objects.

data has the response body.

loading has the request loading state.

error has the error object.

request is a function that lets us make the request again.

react-use-calendar

The react-use-calendar library is a library that lets us add a calendar to our app.

To use it, we run:

to install it.

Then we write:

to use it.

We display the calendar with today’s date displayed in orange.

events is an array with calendar events.

We’ve to render the calendar and events ourselves with our own table.

Image for post
Image for post
Photo by Manasvita S on Unsplash

Conclusion

react-uniformed lets us create a simple form.

React Use API lets us make API requests.

react-use-calendar is a hook that lets us create a calendar.

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