useClipboard

npm install rooks

import { useState } from "react";
import { useClipboard } from "rooks";

function ClipboardDemo() {
  const { copy, paste, text, isSupported, error } = useClipboard();
  const [inputValue, setInputValue] = useState("");

  const handleCopy = async () => {
    try {
      await copy(inputValue);
      console.log("Copied to clipboard!");
    } catch (err) {
      console.error("Failed to copy:", err);
    }
  };

  const handlePaste = async () => {
    try {
      await paste();
      console.log("Pasted from clipboard!");
    } catch (err) {
      console.error("Failed to paste:", err);
    }
  };

  if (!isSupported) {
    return <div>Clipboard API not supported in this browser</div>;
  }

  return (
    <div>
      <h2>Clipboard Demo</h2>
      <div>
        <input
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Enter text to copy"
        />
        <button onClick={handleCopy}>Copy</button>
        <button onClick={handlePaste}>Paste</button>
      </div>
      {text && (
        <div>
          <strong>Clipboard content:</strong> {text}
        </div>
      )}
      {error && (
        <div style={{ color: "red" }}>
          <strong>Error:</strong> {error.message}
        </div>
      )}
    </div>
  );
}

import { useClipboard } from "rooks";

function ClipboardStatus() {
  const { copy, paste, text, error, isSupported } = useClipboard();

  if (!isSupported) {
    return <p>Clipboard access is unavailable in this browser.</p>;
  }

  return (
    <div>
      <button onClick={() => copy("rooks is on the clipboard")}>
        Copy preset text
      </button>
      <button onClick={paste}>Read clipboard</button>

      {text ? <p>Clipboard value: {text}</p> : <p>Clipboard is empty.</p>}
      {error ? <p>Error: {error.message}</p> : null}
    </div>
  );
}