useClippy is a TypeScript-friendly React hook for reading from and writing to the user's clipboard.

Not to be confused with Microsoft Office's assistant, Clippy. 📎

Demo

You can see use-clippy in action via GitHub Pages, which hosts the demo directory.

Install

npm install use-clippy or
yarn add use-clippy

useClippy() returns a tuple analogous to useState, where the first item is the clipboard contents and the second item is a function for setting the clipboard contents.

import React from 'react';
import useClippy from 'use-clippy';
export default function MyComponent() {
  // clipboard is the contents of the user's clipboard.
  // setClipboard('new value') wil set the contents of the user's clipboard.
  const [clipboard, setClipboard] = useClippy();
  return (
    <div>
      {/* Button that demonstrates reading the clipboard. */}
      <button
        onClick={() => {
          alert(`Your clipboard contains: ${clipboard}`);
        }}
      >
        Read my clipboard
      </button>
      {/* Button that demonstrates writing to the clipboard. */}
      <button
        onClick={() => {
          setClipboard(`Random number: ${Math.random()}`);
        }}
      >
        Copy something new
      </button>
    </div>
  );
}

Sponsor 💗

If you are a fan of this project, you may become a sponsor via GitHub's Sponsors Program.