Top React Hooks — Clipboard, APIs, and Forms

Photo by Rosie Kerr 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-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.