📋 use-clipboard-hook

Copy/Cut to clipboard React hook.

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.