@elitedecode/copify

A lightweight TypeScript React hook for copying text to the clipboard with beautiful, customizable toast notifications. Built with zero external dependencies for the toast system.

Features

• 🎯 Simple API - Easy-to-use React hook
• 🎨 Beautiful Toasts - Customizable toast notifications with smooth animations
• 📦 Zero Dependencies - Toast system uses vanilla DOM (no external libraries)
• 🎭 Multiple Variants - Success, error, and info toast variants
• 📍 Flexible Positioning - 6 different toast positions
• ♿ Accessible - Built with ARIA attributes for screen readers
• 🔧 TypeScript - Full TypeScript support with exported types
• ⚡ Lightweight - Minimal bundle size

Installation

npm install @elitedecode/copify

Quick Start

import { useCopyToClipboard } from "@elitedecode/copify";

function MyComponent() {
  const { isCopied, copy } = useCopyToClipboard();

  return (
    <button onClick={() => copy("Hello, World!")}>
      {isCopied ? "Copied!" : "Copy to Clipboard"}
    </button>
  );
}

Usage Examples

Basic Usage

import { useCopyToClipboard } from "@elitedecode/copify";

function CopyButton() {
  const { copy } = useCopyToClipboard();

  return <button onClick={() => copy("Text to copy")}>Copy Text</button>;
}

Custom Toast Message

import { useCopyToClipboard } from "@elitedecode/copify";

function CopyButton() {
  const { copy } = useCopyToClipboard({
    message: "Text copied successfully!",
  });

  return <button onClick={() => copy("Custom message")}>Copy</button>;
}

Custom Toast Position

import { useCopyToClipboard } from "@elitedecode/copify";

function CopyButton() {
  const { copy } = useCopyToClipboard({
    position: "top-center",
  });

  return <button onClick={() => copy("Text")}>Copy</button>;
}

Different Toast Variants

import { useCopyToClipboard } from "@elitedecode/copify";

function CopyButton() {
  const { copy } = useCopyToClipboard({
    variant: "info", // 'success' | 'error' | 'info'
    message: "Information copied!",
  });

  return <button onClick={() => copy("Info text")}>Copy Info</button>;
}

Custom Timeout

import { useCopyToClipboard } from "@elitedecode/copify";

function CopyButton() {
  const { copy } = useCopyToClipboard({
    timeout: 5000, // Toast will stay for 5 seconds
  });

  return <button onClick={() => copy("Text")}>Copy</button>;
}

Hide Close Button

import { useCopyToClipboard } from "@elitedecode/copify";

function CopyButton() {
  const { copy } = useCopyToClipboard({
    showCloseButton: false,
  });

  return <button onClick={() => copy("Text")}>Copy</button>;
}

Using isCopied State

import { useCopyToClipboard } from "@elitedecode/copify";

function CopyButton() {
  const { isCopied, copy } = useCopyToClipboard();

  return (
    <button
      onClick={() => copy("Some text")}
      disabled={isCopied}
      style={{
        backgroundColor: isCopied ? "#10b981" : "#3b82f6",
        color: "white",
      }}
    >
      {isCopied ? "Copied!" : "Copy"}
    </button>
  );
}

Custom Toast Colors

import { useCopyToClipboard } from "@elitedecode/copify";

function CustomColorButton() {
  const { copy } = useCopyToClipboard({
    colors: {
      background: "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
      border: "#6d28d9",
      icon: "✨",
      textColor: "#ffffff",
    },
  });

  return <button onClick={() => copy("Custom colors!")}>Copy</button>;
}

Complete Example with All Options

import { useCopyToClipboard } from "@elitedecode/copify";

function AdvancedCopyButton() {
  const { isCopied, copy } = useCopyToClipboard({
    timeout: 3000,
    message: "Copied to clipboard!",
    variant: "success",
    position: "bottom-right",
    showCloseButton: true,
    colors: {
      background: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
      border: "#047857",
    },
  });

  return (
    <div>
      <button onClick={() => copy("Hello from clipboard!")}>
        {isCopied ? "✓ Copied" : "Copy Text"}
      </button>
    </div>
  );
}

API Reference

useCopyToClipboard(options?)

A React hook that provides clipboard copy functionality with toast notifications.

Parameters

options (optional)

An object with the following properties:

| Property | Type | Default | Description | | ----------------- | ------------------------------------------------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------- | | timeout | number | 2000 | Duration in milliseconds before the toast automatically closes (0 to disable auto-close) | | message | string | "Copied!" | The message to display in the toast notification | | variant | "success" \| "error" \| "info" | "success" | The visual variant of the toast | | position | "top-left" \| "top-right" \| "top-center" \| "bottom-left" \| "bottom-right" \| "bottom-center" | "bottom-right" | The position where the toast appears on the screen | | showCloseButton | boolean | true | Whether to show a close button on the toast | | colors | ToastColors | undefined | Custom colors for the toast (overrides variant colors) |

Returns

An object with the following properties:

| Property | Type | Description | | ---------- | --------------------------------- | ---------------------------------------------------------------------------------------- | | isCopied | boolean | A boolean state indicating whether the last copy operation was successful | | copy | (text: string) => Promise<void> | A function that copies the provided text to the clipboard and shows a toast notification |

Type Definitions

type ToastVariant = "success" | "error" | "info";

type ToastPosition =
  | "top-left"
  | "top-right"
  | "top-center"
  | "bottom-left"
  | "bottom-right"
  | "bottom-center";

interface ToastColors {
  background?: string;
  border?: string;
  icon?: string;
  textColor?: string;
}

interface UseCopyToClipboardOptions {
  timeout?: number;
  message?: string;
  variant?: ToastVariant;
  position?: ToastPosition;
  showCloseButton?: boolean;
  colors?: ToastColors;
}

All types are exported and can be imported:

import type {
  ToastVariant,
  ToastPosition,
  ToastColors,
  UseCopyToClipboardOptions,
} from "@elitedecode/copify";

Toast Variants

Success (Default)

• Green gradient background
• Checkmark icon (✓)
• Used for successful copy operations

Error

• Red gradient background
• Cross icon (✕)
• Automatically shown when copy fails

Info

• Blue gradient background
• Info icon (ℹ)
• Use for informational messages

Toast Positions

The toast can be positioned in any of these 6 locations:

• top-left - Top left corner
• top-right - Top right corner
• top-center - Top center
• bottom-left - Bottom left corner
• bottom-right - Bottom right corner (default)
• bottom-center - Bottom center

Error Handling

The hook automatically handles copy failures and displays an error toast. If the clipboard API fails, you'll see a red error toast with the message "Failed to copy to clipboard".

// The hook automatically handles errors
const { copy } = useCopyToClipboard();

// If copy fails, an error toast will appear automatically
await copy("Some text"); // No need for try-catch

Browser Support

This package uses the modern Clipboard API, which is supported in:

• Chrome 66+
• Firefox 63+
• Safari 13.1+
• Edge 79+

For older browsers, you may need to use a polyfill or fallback method.

Requirements

• React 16.8+ (hooks support required)
• Modern browser with Clipboard API support

License

MIT

Author

BeardedTech Guy

Repository

• GitHub: elitedecode/copy-to-clipboard