Skip to content

fayeed/use-clipboard

Repository files navigation

📋 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.

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.