Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

use-clipboard-hook

Package Overview
Dependencies
1
Maintainers
1
Versions
4
Issues
File Explorer

Advanced tools

use-clipboard-hook

Copy to clipboard React hook.

    1.1.1latest

Version published
Maintainers
1
Yearly downloads
13,934
increased by70.74%

Weekly downloads

Readme

Source

📋 use-clipboard-hook

Copy/Cut to clipboard React hook.

NPM JavaScript Style Guide

Install

Using npm:

npm install --save use-clipboard-hook

Using yarn:

yarn add use-clipboard-hook

Usage

import * as React from "react"; import { useClipboard } from "use-clipboard-hook"; const Example = () => { const {ref, copy, cut} = useClipboard({ onSuccess: (text) => alert(`Copied: ${text}`), }); return ( <div> <input ref={ref} defaultValue="Change this..." /> <button onClick={copy}>copy</button> <button onClick={cut}>cut</button> </div> ); };

API

useClipboard(options: UseClipboardProps): useClipboardReturnType

UseClipboardProps

  • onSuccess - It's a callback function that is called after the copy or cut command is executed.
  • onError - Triggers when the hook encounters an error. If passed hook won't throw an error.
  • disableClipboardAPI - Disables the new clipboard API navigator.clipboard even if it is supported.
  • copiedDuration - Revert back the isCopied flag to false again if a value is set.

useClipboardReturnType

  • ref - Use ref to pull the text content from.
  • copy - Used to perform the copy operation.
  • cut - Used to perform the cut operation.
  • isCoppied - Indicates wheater the content was successfully copied or not.
  • clipboard - Current selected clipboard content.
  • clearClipboard - Clears the user clipboard.
  • isSupported - Check to see if the browser supports the new navigator.clipboard API.

Live Demo

Credits 👨🏻‍💻

toggle-selection - sudodoki

Found this project useful? ❤️

If you found this project useful, then please consider giving it a ⭐️ on Github and sharing it with your friends via social media.

Issues and feedback 💭

If you have any suggestion for including a feature or if something doesn't work, feel free to open a Github issue for us to have a discussion on it.

License

MIT © fayeed


This hook is created using create-react-hook.

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc