React Copy to Clipboard

5.1.1 · active · verified Sun Apr 19

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.

Common errors

```
Error: `CopyToClipboard` expects a single React element child.
```
cause 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.
```
cause 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.
```
cause 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.

Warnings

breaking Version 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.
breaking The `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.
gotcha The `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.
gotcha Starting 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.

Install

npm install react-copy-to-clipboard npm
yarn add react-copy-to-clipboard yarn
pnpm add react-copy-to-clipboard pnpm

Imports

CopyToClipboard
wrong:
```
import CopyToClipboard from 'react-copy-to-clipboard';
```
correct:
```
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');`.

Quickstart

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

view raw JSON →