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

react-copy-to-clipboard

library5.1.1jsnpmunverified

react-copy-to-clipboard is a React component that simplifies the process of copying text to the user's clipboard. It acts as a wrapper around the core `copy-to-clipboard` library, offering a declarative API for use within React applications. The component intelligently attempts to copy text using `document.execCommand('copy')`, falls back to the IE-specific `clipboardData` interface, and, if all else fails, provides a prompt for manual copying. The current stable version is 5.1.1. Releases are generally driven by dependency updates, bug fixes, or new React version compatibility. Its key differentiators include its simple, single-child wrapper pattern and its robust, multi-strategy approach to clipboard access, ensuring broad browser compatibility and reliability.

web-framework http-networking

npm install react-copy-to-clipboard

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-COPY-TO-CLIP

react-copy-to-clipboard

web-frameworkjavascriptv5.1.1

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';

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

The component is a named export, not a default export. CommonJS users would typically use `const { CopyToClipboard } = require('react-copy-to-clipboard');`.

Demonstrates a basic React functional component using `CopyToClipboard` to copy text from an input field, showing visual feedback upon successful copy.

import React from 'react'; import ReactDOM from 'react-dom'; import { CopyToClipboard } from 'react-copy-to-clipboard'; function App() { const [value, setValue] = React.useState(''); const [copied, setCopied] = React.useState(false); return ( <div> <input value={value} onChange={({ target: { value } }) => { setValue(value); setCopied(false); }} placeholder="Enter text to copy" style={{ padding: '8px', border: '1px solid #ccc' }} /> <CopyToClipboard text={value} onCopy={() => setCopied(true)}> <button style={{ marginLeft: '10px', padding: '8px 15px', cursor: 'pointer' }}> Copy to clipboard </button> </CopyToClipboard> {copied ? <span style={{ color: 'green', marginLeft: '10px' }}>Copied!</span> : null} </div> ); } const appRoot = document.createElement('div'); document.body.appendChild(appRoot); ReactDOM.render(<App />, appRoot);

Debug

Known issues

breakingVersion 5.0.0 dropped support for React versions older than 15.3.0. Using an older React version will result in errors.

fix

Ensure your project's `react` peer dependency is version 15.3.0 or higher. For older React versions, consider using `react-copy-to-clipboard` v4.x.

affects: >=5.0.0

breakingThe `onCopy` callback signature changed in v4.3.0 to include a `result` boolean, indicating whether the copy operation was successful or not. Older implementations might not expect this second argument.

fix

Update your `onCopy` callback function signature to accept two arguments: `(text, result) => { ... }`. Check the `result` boolean for copy success or failure.

affects: >=4.3.0

gotchaThe `CopyToClipboard` component is a wrapper and does not render any DOM element itself. It explicitly requires a single React element as its direct child, which will act as the click target.

fix

Ensure `CopyToClipboard` directly wraps exactly one React element, e.g., `<CopyToClipboard text="Hi"><button>Copy</button></CopyToClipboard>`. Providing multiple children or no children will cause a runtime error.

affects: >=1.0.0

gotchaStarting with v5.1.0, React 18 was added as a peer dependency. While the component generally maintains backward compatibility with React versions down to 15.3.0, projects specifically targeting React 18 should ensure peer dependency resolution.

fix

Verify that your project's `react` version is compatible with the peer dependency requirements, especially when working in React 18+ environments to avoid peer dependency warnings.

affects: >=5.1.0

Errors

Common errors & fixes

Error: `CopyToClipboard` expects a single React element child.

The `CopyToClipboard` component received zero or more than one child element, or the child was not a valid React element.

fix

Ensure the component directly wraps exactly one React element, such as a `<button>` or `<span>`. For example: `<CopyToClipboard text="..."> <button>Copy</button> </CopyToClipboard>`.

Warning: You are using an unsupported version of React.

The `react-copy-to-clipboard` package (v5.x) was installed in a project using a React version older than 15.3.0, which is no longer supported.

fix

Upgrade your project's `react` and `react-dom` packages to version 15.3.0 or higher, or downgrade `react-copy-to-clipboard` to a compatible v4.x release.

TypeError: Cannot read properties of undefined (reading 'onCopy') or similar errors related to onCopy arguments.

The `onCopy` prop was either not provided as a function, or its signature did not correctly handle the arguments (e.g., expecting only `text` when `result` is also passed since v4.3.0).

fix

Ensure the `onCopy` prop is a valid function. If using v4.3.0 or later, update the `onCopy` callback signature to `(text, result) => { ... }` to correctly receive both arguments.

Upgrade

Version history

5.1.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for the React component to function.

Agent activity

5 hits · last 30 days

node

Resources

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

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