use-clipboard-copier

useClipBoardCopier 🪝

A React hook which helps you copy text to your clipboard 📋

Installation

npm install use-clipboard-copier

Usage

import React from "react";
import { useClipBoardCopier } from "use-clipboard-copier";

const hasCopiedTimer = 10000; // 10 seconds

const App: React.FC = () => {
  const { isCopied, clipBoardRef, copyToClipBoard } =
    useClipBoardCopier(hasCopiedTimer);

  const handleCopyClick = () => {
    copyToClipBoard();
  };

  return (
    <div>
      <input ref={clipBoardRef} placeholder="type something..." />
      <button onClick={handleCopyClick}>Copy to Clipboard</button>
      {isCopied ? <p>Copied</p> : <p>Copy</p>}
    </div>
  );
};

export default App;

Note: This hook works with all HTML ELEMENTS including INPUT ELEMENT as well.

Example: use-clipboard-copier.vercel.app

Checkout use-clipboard-copier on npm

Contributors