{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-copy-to-clipboard"],"cli":null},"imports":["import { CopyToClipboard } from 'react-copy-to-clipboard';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}