Registry / web-framework / react-copy-to-clipboard-lite

react-copy-to-clipboard-lite

library1.0.3jsnpmunverified

react-copy-to-clipboard-lite is a lightweight (approx. 1.1 kB minzipped), dependency-free utility for copying text to the clipboard in React applications, currently at version 1.0.3. It offers a tiered fallback mechanism, utilizing the modern Clipboard API first and gracefully falling back to `document.execCommand` for older browsers like Safari, without relying on deprecated `prompt()` calls for permissions. The library provides structured `CopyResult` objects for robust error handling and never throws exceptions. It is designed to be SSR-safe, permission-aware (checking `navigator.permissions.query()` without prompting), and fully supports React 18+ environments, including new React 19 features like `formAction` and `useActionState`. This package differentiates itself through its minimal footprint, lack of runtime dependencies, and explicit handling of permissions and SSR contexts.

web-framework

npm install react-copy-to-clipboard-lite

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-COPY-TO-CLIP

react-copy-to-clipboard-lite

web-frameworkjavascriptv1.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

copyToClipboard

✓ import { copyToClipboard } from 'react-copy-to-clipboard-lite';

✗ import { copyToClipboard } from 'react-copy-to-clipboard-lite/react';

This is the core, framework-agnostic utility. Do not import from the '/react' entry point.

useCopyToClipboard

✓ import { useCopyToClipboard } from 'react-copy-to-clipboard-lite/react';

✗ import { useCopyToClipboard } from 'react-copy-to-clipboard-lite';

This is the React hook for component-level clipboard functionality. Must be imported from the '/react' entry point.

CopyToClipboard

✓ import { CopyToClipboard } from 'react-copy-to-clipboard-lite/react';

✗ import CopyToClipboard from 'react-copy-to-clipboard-lite/react';

The React component provides a declarative way to integrate copy functionality. It is a named export, not a default export.

copyToClipboardAction

✓ import { copyToClipboardAction } from 'react-copy-to-clipboard-lite/react';

✗ const copyToClipboardAction = require('react-copy-to-clipboard-lite/react').copyToClipboardAction;

Specifically designed for React 19's `formAction` and `useActionState`. ESM import is the standard usage.

Demonstrates how to use the `useCopyToClipboard` React hook to add copy-to-clipboard functionality to a button, including handling copy status and potential errors.

import React, { useState } from 'react'; import { useCopyToClipboard } from 'react-copy-to-clipboard-lite/react'; function MyCopyButton() { const [textToCopy, setTextToCopy] = useState('Default text to copy'); const { copy, copied, error, reset } = useCopyToClipboard({ timeout: 2000, clearAfter: 5000 }); const handleCopy = async () => { const result = await copy(textToCopy); if (result.success) { console.log('Successfully copied:', result.method); } else { console.error('Failed to copy:', result.code, result.error); } }; return ( <div> <input type="text" value={textToCopy} onChange={(e) => setTextToCopy(e.target.value)} placeholder="Enter text to copy" aria-label="Text to copy" /> <button onClick={handleCopy} disabled={copied}> {copied ? 'Copied!' : 'Copy Text'} </button> {error && <p style={{ color: 'red' }}>Error copying: {error.code}</p>} {copied && <button onClick={reset}>Reset Copy Status</button>} </div> ); } export default MyCopyButton;

Debug

Known issues

breakingWhen migrating from `react-copy-to-clipboard`, you must update import paths. This library uses explicit '/react' entry points for React-specific features.

fix

Change `import { CopyToClipboard } from "react-copy-to-clipboard"` to `import { CopyToClipboard } from "react-copy-to-clipboard-lite/react"` and similar for other modules.

affects: >=1.0.0

gotchaThe Clipboard API (preferred method) requires a secure context (HTTPS or localhost). Clipboard operations will silently fall back to `execCommand` or fail in insecure HTTP environments.

fix

Ensure your application is served over HTTPS in production and use localhost for development to fully leverage the Clipboard API.

affects: >=1.0.0

gotchaThis library is permission-aware but will not prompt the user for clipboard access. If permissions are denied or unavailable, the operation might silently fail or use a fallback.

fix

Consider providing UI feedback to users about clipboard permission status if granular control and user awareness are critical for your application.

affects: >=1.0.0

gotchaThe `clearAfter` option is a best-effort feature for clearing clipboard content after a delay and does not guarantee absolute data removal. It also never reads clipboard content.

fix

Do not rely on `clearAfter` for sensitive data that requires absolute and guaranteed destruction from clipboard history. It's a convenience, not a security feature.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'copy') / copy is not a function

Attempting to use `copy` from the core `react-copy-to-clipboard-lite` entry point, which does not export React hooks or components.

fix

Ensure you are importing React hooks/components from the correct path: `import { useCopyToClipboard } from 'react-copy-to-clipboard-lite/react';`

Clipboard operation failed: INSECURE_CONTEXT

The browser's Clipboard API cannot be used in an insecure context (e.g., an HTTP page).

fix

Access your application over HTTPS or use `localhost` during development to enable the Clipboard API.

Clipboard operation failed: PERMISSION_DENIED

The user or browser security settings have denied clipboard write access, or the `navigator.permissions` API indicated denial.

fix

This library does not prompt for permissions. You may need to instruct users to manually grant clipboard permissions in their browser settings for your domain.

Module not found: Can't resolve 'react-copy-to-clipboard-lite/react'

The import path for React-specific components or hooks is incorrect or the package wasn't installed correctly.

fix

Verify the package is installed (`npm install react-copy-to-clipboard-lite`) and ensure the import path `react-copy-to-clipboard-lite/react` is typed correctly.

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

reactrequiredRequired for React hooks, components, and action integrations.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/rajudandigam/react-copy-to-clipboard-lite ↗

packagehttps://www.npmjs.com/package/react-copy-to-clipboard-lite ↗