Skip to content

CharlesStover/use-clippy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

useClippy Tweet version minified size minzipped size downloads build

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

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

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.