useClipboard

Clipboards made easy. Methods for adding, reading and clearing the clipboard.

Installation

npx rabbithook@latest add use-clipboard

Usage

App.tsx

import useClipboard from "@/hooks/use-clipboard";

function Component() {
  const { value, copyToClipboard, clearClipboard, readClipboard } = useClipboard();

  return (
    <>
      <p>{ value }</p>
      <button onClick={() => copyToClipboard("Hello, clipboard!")}>Copy</button>
      <button onClick={clearClipboard}>Clear</button>
      <button onClick={readClipboard}>Read</button>
    </>
  )
}

Code

Typescript

use-clipboard.ts

import { useState } from "react";

function useClipboard() {
  const [clipboardState, setClipboardState] = useState("");

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
      .then(() => {
        setClipboardState(text);
      })
      .catch((error) => {
        console.error("Failed to copy to clipboard:", error);
      });
  };

  const clearClipboard = () => {
    navigator.clipboard.writeText("")
      .then(() => {
        setClipboardState("");
      })
      .catch((error) => {
        console.error("Failed to clear clipboard:", error);
      });
  };

  const readClipboard = () => {
    navigator.clipboard.readText()
      .then((value) => {
        setClipboardState(value);
      })
      .catch((error) => {
        console.error("Failed to read clipboard:", error);
      });
  };

  return {
    value: clipboardState,
    copyToClipboard,
    clearClipboard,
    readClipboard,
  };
};

export default useClipboard;

Javascript

use-clipboard.js

import { useState } from "react";

function useClipboard() {
  const [clipboardState, setClipboardState] = useState("");

  const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text)
      .then(() => {
        setClipboardState(text);
      })
      .catch((error) => {
        console.error("Failed to copy to clipboard:", error);
      });
  };

  const clearClipboard = () => {
    navigator.clipboard.writeText("")
      .then(() => {
        setClipboardState("");
      })
      .catch((error) => {
        console.error("Failed to clear clipboard:", error);
      });
  };

  const readClipboard = () => {
    navigator.clipboard.readText()
      .then((value) => {
        setClipboardState(value);
      })
      .catch((error) => {
        console.error("Failed to read clipboard:", error);
      });
  };

  return {
    value: clipboardState,
    copyToClipboard,
    clearClipboard,
    readClipboard,
  };
};

export default useClipboard;