Top React Hooks — Input, Modals, and Lazy Load Images

Image for post
Image for post
Photo by Holger Link 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-input

The react-use-input lets us bind to inputs easily with our React component.

To use it, we run:

Then we can use it by writing:

We just use the useInput hook, which returns an array with the form field state and the function to set the input value to the form field state.

Likewise, we can do the same for a checkbox.

For example, we can write:

The useInput hook takes 2 arguments.

The first is the checked value.

The 2nd is the attribute name.

We can pass the state and the state setter function into our checkbox input.

react-use-lazy-load-image

react-use-lazy-load-image lets us lazy load our images.

This means that the image loads only when we display the image.

To install it, we run:

Then we can use it by writing:

src has the URL of the placeholder image.

data-img-src has the lazy-loaded image.

useLazyLoadImage lets us do the lazy loading.

react-use-modal

The react-use-modal library lets us create a toggle to toggle our modal.

To install it, we run:

or:

Then we can use it by writing:

index.js

App.js

We use the ModalProvider and wrap that in our app.

Then we can use the useModal in App to get an object with the showModal and closeModal functions.

showModal is used to render the modal.

We pass a function with the modal content.

closeModal lets us close the modal.

We use React Bootstrap to make creating the modal easier.

Image for post
Image for post
Photo by Sébastien LAVALAYE on Unsplash

Conclusion

react-use-input lets us create inputs easily.

react-use-lazy-load-image lets us lazy load images.

react-use-modal is useful for letting us toggle modals.

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