Need help with use-clippy?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

CharlesStover
132 Stars 8 Forks MIT License 45 Commits 2 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 38,629
TypeScr...
React
travis
reactjs
20 commits
# 2,219
d3v5
autoit
R
atom-pl...
1 commit

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 (

  {/* Button that demonstrates reading the clipboard. */}
  <button onclick="{()"> {
      alert(`Your clipboard contains: ${clipboard}`);
    }}
  &gt;
    Read my clipboard
  </button>

  {/* Button that demonstrates writing to the clipboard. */}
  <button onclick="{()"> {
      setClipboard(`Random number: ${Math.random()}`);
    }}
  &gt;
    Copy something new
  </button>
</div>

); }

Sponsor 💗

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.