Skip to content
React Hook for reading from and writing to the user's clipboard.
Branch: master
Clone or download
Latest commit 89461e9 Jul 14, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src resolves #1 Mar 20, 2019
.travis.yml init Mar 20, 2019
LICENSE Initial commit Mar 20, 2019 Update 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

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. 📎


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

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 (

      {/* Button that demonstrates reading the clipboard. */}
        onClick={() => {
          alert(`Your clipboard contains: ${clipboard}`);
        Read my clipboard

      {/* Button that demonstrates writing to the clipboard. */}
        onClick={() => {
        Copy something new

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