{"id":11672,"library":"react-copy-to-clipboard","title":"React Copy to Clipboard","description":"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.","status":"active","version":"5.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/nkbt/react-copy-to-clipboard","tags":["javascript","component","react-component","react","copy to clipboard","clipboard"],"install":[{"cmd":"npm install react-copy-to-clipboard","lang":"bash","label":"npm"},{"cmd":"yarn add react-copy-to-clipboard","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-copy-to-clipboard","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the React component to function.","package":"react","optional":false}],"imports":[{"note":"The component is a named export, not a default export. CommonJS users would typically use `const { CopyToClipboard } = require('react-copy-to-clipboard');`.","wrong":"import CopyToClipboard from 'react-copy-to-clipboard';","symbol":"CopyToClipboard","correct":"import { CopyToClipboard } from 'react-copy-to-clipboard';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\n\nfunction App() {\n  const [value, setValue] = React.useState('');\n  const [copied, setCopied] = React.useState(false);\n\n  return (\n    <div>\n      <input\n        value={value}\n        onChange={({ target: { value } }) => {\n          setValue(value);\n          setCopied(false);\n        }}\n        placeholder=\"Enter text to copy\"\n        style={{ padding: '8px', border: '1px solid #ccc' }}\n      />\n\n      <CopyToClipboard text={value} onCopy={() => setCopied(true)}>\n        <button style={{ marginLeft: '10px', padding: '8px 15px', cursor: 'pointer' }}>\n          Copy to clipboard\n        </button>\n      </CopyToClipboard>\n\n      {copied ? <span style={{ color: 'green', marginLeft: '10px' }}>Copied!</span> : null}\n    </div>\n  );\n}\n\nconst appRoot = document.createElement('div');\ndocument.body.appendChild(appRoot);\nReactDOM.render(<App />, appRoot);","lang":"javascript","description":"Demonstrates a basic React functional component using `CopyToClipboard` to copy text from an input field, showing visual feedback upon successful copy."},"warnings":[{"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.","message":"Version 5.0.0 dropped support for React versions older than 15.3.0. Using an older React version will result in errors.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Update your `onCopy` callback function signature to accept two arguments: `(text, result) => { ... }`. Check the `result` boolean for copy success or failure.","message":"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.","severity":"breaking","affected_versions":">=4.3.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=5.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the component directly wraps exactly one React element, such as a `<button>` or `<span>`. For example: `<CopyToClipboard text=\"...\"> <button>Copy</button> </CopyToClipboard>`.","cause":"The `CopyToClipboard` component received zero or more than one child element, or the child was not a valid React element.","error":"Error: `CopyToClipboard` expects a single React element child."},{"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.","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.","error":"Warning: You are using an unsupported version of React."},{"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.","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).","error":"TypeError: Cannot read properties of undefined (reading 'onCopy') or similar errors related to onCopy arguments."}],"ecosystem":"npm"}