Skip to content
React Hook for reading from and writing to the user's clipboard.
TypeScript
Branch: master
Clone or download
Latest commit 89461e9 Jul 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src resolves #1 Mar 20, 2019
.gitignore
.npmignore
.travis.yml init Mar 20, 2019
LICENSE Initial commit Mar 20, 2019
README.md Update README.md Jul 14, 2019
package.json Bump @types/node from 11.11.4 to 12.6.2 Jul 12, 2019
tsconfig.json useClippy Mar 20, 2019
yarn.lock Merge pull request #7 from CharlesStover/dependabot/npm_and_yarn/type… Jul 12, 2019

README.md

useClippy Tweet version minified size minzipped size downloads build

useClippy is a React Hook for reading from and writing to the user's clipboard.

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

Install

  • npm install use-clippy or
  • yarn add use-clippy

Use

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';

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(`${Math.random()}`);
        }}
      >
        Copy something new
      </button>
    </div>
  );
}

export default MyComponent;
You can’t perform that action at this time.