Numerous Packages Multiply

    use-clippy
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    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.

    Keywords

    none

    Install

    npm i use-clippy

    DownloadsWeekly Downloads

    913

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    18.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • charlesstover