Top React Hooks — Clipboard, APIs, and Forms

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:

npm install react-use-clipboard --save-exact

or

yarn add react-use-clipboard --exact

Then we can use it by writing:

import React from "react";
import useClipboard from "react-use-clipboard";

export default function App() {
  const [isCopied, setCopied] = useClipboard("hello world");

  return (
    <button onClick={setCopied}>{isCopied ? "copied" : "not copied"}</button>
  );
}

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:

import React from "react";
import useClipboard from "react-use-clipboard";

export default function App() {
  const [isCopied, setCopied] = useClipboard("hello world", {
    successDuration: 1000
  });

  return (
    <button onClick={setCopied}>{isCopied ? "copied" : "not copied"}</button>
  );
}

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:

npm install --save react-use-data-loader

or:

yarn add react-use-data-loader

Then we can use it by writing;

import React from "react";
import { useDataLoader } from "react-use-data-loader";

async function getData(name) {
  const res = await fetch(`https://api.agify.io/?name=${name}`);
  const data = await res.json();
  return data;
}

export default function App() {
  const { data, error, loading, retry } = useDataLoader(getData, "michael");

  if (loading) {
    return <div>loading...</div>;
  }

  if (error) {
    return <div>Error</div>;
  }

  return (
    <>
      <div>{JSON.stringify(data)}</div>
    </>
  );
}

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:

npm install --save react-use-form-state

Then we can use it by writing:

import React from "react";
import { useFormState } from "react-use-form-state";

export default function App() {
  const [formState, { text, email, password, radio }] = useFormState();

  function handleSubmit(e) {
    e.preventDefault();
    console.log(formState.values);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input {...text("name")} placeholder="name" />
      <input {...email("email")} required placeholder="email" />
      <input
        {...password("password")}
        required
        minLength="8"
        placeholder="password"
      />
      <br />
      <input {...radio("plan", "free")} /> free
      <input {...radio("plan", "premium")} /> premium
      <br />
      <input type="submit" />
    </form>
  );
}

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 .

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.