react-clipboard-file-utils

Production-ready React hooks for clipboard and drag-and-drop file handling. Written in TypeScript, tree-shakable, and optimized for React 18+ as well as Next.js client components.

GitHub repository: https://github.com/Venkatesh170804/react-clipboard-file-utils

Installation

npm install react-clipboard-file-utils
# or
yarn add react-clipboard-file-utils

Quick Start

import { useClipboard, useFileDrop } from 'react-clipboard-file-utils';

export function Demo() {
  const { copy, copied } = useClipboard();
  const { bind, files, isDragging } = useFileDrop({ acceptedTypes: ['image/*'] });

  return (
    <section {...bind} className={isDragging ? 'dropzone dragging' : 'dropzone'}>
      <button onClick={() => copy('hello world')}>{copied ? 'Copied!' : 'Copy'}</button>
      {files.map((file) => (
        <p key={file.name}>{file.name}</p>
      ))}
    </section>
  );
}

Hooks

useClipboard(options?)

type UseClipboardOptions = { resetAfter?: number };

type ClipboardHook = {
  copy(value: string): Promise<boolean>;
  copyImage(blob: Blob): Promise<boolean>;
  readText(): Promise<string | null>;
  readImage(): Promise<Blob | null>;
  isSupported: boolean;
  copied: boolean;
  error: Error | null;
};

• copy: writes text with clipboard API (fallbacks to execCommand)
• copyImage: copies Blob/File via ClipboardItem when supported
• readText, readImage: safe guards for unsupported browsers
• copied: auto-resets after resetAfter ms (default 2000)
• error: last thrown error, if any

useFileDrop(options?)

type FileDropOptions = {
  maxSize?: number; // bytes
  acceptedTypes?: string[]; // e.g. ['image/*', 'application/pdf']
  multiple?: boolean; // default true
};

type FileDropHook = {
  isDragging: boolean;
  files: File[];
  error: string | null;
  bind: {
    onDragOver: React.DragEventHandler<HTMLElement>;
    onDragLeave: React.DragEventHandler<HTMLElement>;
    onDrop: React.DragEventHandler<HTMLElement>;
  };
};

• Tracks drag-over highlight state
• Validates size, MIME types, and file count
• Normalizes drop bindings for any drop target

API Examples

Copy an image

const { copyImage, error } = useClipboard();

const onCopy = async (file: File) => {
  await copyImage(file);
  if (error) {
    console.warn(error.message);
  }
};

File dropzone with validations

const { bind, files, error } = useFileDrop({
  maxSize: 5 * 1024 * 1024,
  acceptedTypes: ['image/*'],
  multiple: false
});

Browser Support

• Clipboard: falls back to execCommand('copy') when navigator.clipboard is unavailable
• File drop: relies on standard HTML5 drag-and-drop APIs
• Tested against latest Chrome, Edge, Safari, and Firefox

Build & Publish

npm install
npm run test
npm run build

# Publish workflow
npm login
npm version patch
npm publish --access public

The package uses tsup for dual ESM/CJS builds with type declarations and sourcemaps.

Contributing

1. Fork & clone
2. npm install
3. npm run test and npm run build
4. Submit a pull request with context and tests

Roadmap & Ideas

• Paste-aware hook for instant clipboard ingestion
• File preview utilities (image/video/audio)
• Accessibility helpers for announcing drag state
• Component recipes for dropzones and clipboard buttons

Have an idea? Open an issue or share your use case!