A React hook for reading from and writing to the clipboard.
npm install use-clippyuseClippy is a TypeScript-friendly React hook for reading from and writing to
use-clippy in action via GitHub Pages,
demo directory.
npm install use-clippy or
yarn add use-clippy
useClippy() returns a tuple analogous to useState, where the first item is
JavaScript
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. /}
onClick={() => {
alert(Your clipboard contains: ${clipboard});
}}
>
Read my clipboard
{/ Button that demonstrates writing to the clipboard. /}
onClick={() => {
setClipboard(Random number: ${Math.random()});
}}
>
Copy something new
);
}
``