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

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:

yarn add react-use-input

Then we can use it by writing:

import React from "react";
import useInput from "react-use-input";

export default function App() {
  const [name, setName] = useInput();

  return (
    <>
      <input value={name} onChange={setName} />
      <p>{name}</p>
    </>
  );
}

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:

import React from "react";
import useInput from "react-use-input";

export default function App() {
  const [selected, setSelected] = useInput(false, "checked");

  return (
    <>
      <input type="checkbox" checked={selected} onChange={setSelected} />
      <p>{selected.toString()}</p>
    </>
  );
}

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:

npm i react-use-lazy-load-image

Then we can use it by writing:

import React from "react";
import useLazyLoadImage from "react-use-lazy-load-image";

export default function App() {
  useLazyLoadImage();

  return (
    <>
      <img
        src="https://placekitten.com/g/200/200"
        data-img-src="https://placekitten.com/g/600/600"
        alt="cat"
      />
    </>
  );
}

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:

yarn add react-use-modal

or:

npm install react-use-modal --save

Then we can use it by writing:

index.js

import React from "react";
import ReactDOM from "react-dom";
import { ModalProvider } from "react-use-modal";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <ModalProvider>
    <App />
  </ModalProvider>,
  rootElement
);

App.js

import React from "react";
import { Modal } from "react-bootstrap";
import { useModal } from "react-use-modal";

export default function App() {
  const { showModal, closeModal } = useModal();

  function handleClick() {
    showModal(({ show }) => (
      <Modal show={show} onHide={closeModal}>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>Modal body.</Modal.Body>
      </Modal>
    ));
  }

  return <button onClick={handleClick}>modal</button>;
}

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.

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.