https://github.com/CharlesStover/use-clippy

React Hook for reading from and writing to the user's clipboard.
https://github.com/CharlesStover/use-clippy

clipboard clipboard-api clipboard-copy clipboard-javascript clipboard-js clipboard-management clipboard-manager clipboard-managers clipboard-modifier javascript npm npmjs react react-hooks reactjs travis travis-ci travisci typescript

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/CharlesStover/use-clippy
• Owner: CharlesStover
• License: mit
• Created: 2019-03-20T16:46:55.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-11-09T23:32:26.000Z (about 2 years ago)
• Last Synced: 2024-05-10T18:58:11.279Z (7 months ago)
• Topics: clipboard, clipboard-api, clipboard-copy, clipboard-javascript, clipboard-js, clipboard-management, clipboard-manager, clipboard-managers, clipboard-modifier, javascript, npm, npmjs, react, react-hooks, reactjs, travis, travis-ci, travisci, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/use-clippy
• Size: 998 KB
• Stars: 181
• Watchers: 3
• Forks: 11
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-clippy`
• awesome-react-hooks-cn - `use-clippy`
• awesome-react-hooks - `use-clippy`
• awesome-react-hooks - `use-clippy`

README

        
# useClippy [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=useClippy%20lets%20you%20manage%20your%20users'%20clipboards%20with%20a%20React%20hook.&url=https://github.com/CharlesStover/use-clippy&via=CharlesStover&hashtags=react,reactjs,javascript,typescript,webdev,webdevelopment) [![version](https://img.shields.io/npm/v/use-clippy.svg)](https://www.npmjs.com/package/use-clippy) [![minified size](https://img.shields.io/bundlephobia/min/use-clippy.svg)](https://www.npmjs.com/package/use-clippy) [![minzipped size](https://img.shields.io/bundlephobia/minzip/use-clippy.svg)](https://www.npmjs.com/package/use-clippy) [![downloads](https://img.shields.io/npm/dt/use-clippy.svg)](https://www.npmjs.com/package/use-clippy) [![build](https://api.travis-ci.com/CharlesStover/use-clippy.svg)](https://travis-ci.com/CharlesStover/use-clippy/)

`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](https://charlesstover.github.io/use-clippy/),

which hosts the

[`demo`](https://github.com/CharlesStover/use-clippy/tree/master/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.

```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. */}

       {

          alert(`Your clipboard contains: ${clipboard}`);

        }}

      >

        Read my clipboard

      

      {/* Button that demonstrates writing to the clipboard. */}

       {

          setClipboard(`Random number: ${Math.random()}`);

        }}

      >

        Copy something new

      

    

  );

}

```


## Sponsor 💗

If you are a fan of this project, you may

[become a sponsor](https://github.com/sponsors/CharlesStover)

via GitHub's Sponsors Program.