Top React Hooks — Calendar, Form, and API

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:

npm install --save react-uniformed

or:

yarn add react-uniformed

to install it.

Then we can use it by writing:

import React from "react";
import { useForm, useSettersAsEventHandler } from "react-uniformed";

export default function App() {
  const { setValue, values, submit } = useForm({
    onSubmit: data => console.log(data)
  });

  const handleChange = useSettersAsEventHandler(setValue);

  return (
    <>
      <form onSubmit={submit}>
        <label>Name</label>
        <input name="name" value={values.name} onChange={handleChange} />

<button>Submit</button>
      </form>
    </>
  );
}

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:

npm i react-use-api axios

or:

yarn add react-use-api axios

to install it.

Then we can use it by writing:

index.js

import React from "react";
import ReactDOM from "react-dom";
import { ApiProvider } from "react-use-api";

import App from "./App";

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

App.js

import React from "react";
import useApi from "react-use-api";

export default function App() {
  const [data, { loading, error }, request] = useApi({
    url: "https://api.agify.io?name=michael"
  });

  return (
    <>
      {loading && <div>Loading...</div>}
      {error && <div>{error.response.data.errMsg}</div>}
      {data && <>{JSON.stringify(data)}</>}
    </>
  );
}

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:

npm install react-use-calendar --save

to install it.

Then we write:

import React from "react";
import useCalendar from "react-use-calendar";

export default function App() {
  const [state, actions] = useCalendar(null, {
    events: [
      {
        startDate: new Date(2020, 8, 27),
        endDate: new Date(2020, 8, 27),
        note: "meeting"
      },
      {
        startDate: new Date(2020, 8, 22),
        endDate: new Date(2020, 8, 25),
        note: "vacation"
      }
    ]
  });

  return (
    <table>
      <thead>
        <tr>
          <td colSpan={5} style={{ textAlign: "center" }}>
            <strong>
              {state.month} - {state.year}
            </strong>
          </td>
          <td colSpan={2} style={{ textAlign: "right" }}>
            <button onClick={() => actions.getPrevMonth()}>&lt;</button>
            <button onClick={() => actions.getNextMonth()}>&gt;</button>
          </td>
        </tr>
        <tr>
          {state.days.map(day => (
            <th key={day}>{day}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {state.weeks.map((week, index) => (
          <tr key={index}>
            {week.map(day => (
              <td
                key={day.dayOfMonth}
                style={{
                  textAlign: "center",
                  backgroundColor: day.isToday ? "orange" : "#fff"
                }}
              >
                {day.dayOfMonth}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

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.

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.