react-copy-to-clipboard

react-copy-to-clipboard is a minimal React wrapper component that adds copy-to-clipboard behavior to any single child element — a button, span, or icon — without dictating its markup or styling. It delegates the actual clipboard write to the battle-tested copy-to-clipboard package, which layers execCommand, the IE-specific clipboardData interface, and a prompt-based fallback so the copy action works across a wide range of browsers.

Rather than rendering its own DOM node, the component clones its single child and attaches an onClick handler, preserving any onClick the child already had. An optional onCopy(text, result) callback reports whether the copy succeeded, making it easy to drive UI feedback like a “Copied!” message. With one required text prop and just two runtime dependencies, it’s a drop-in solution for apps that need copy-to-clipboard buttons without reimplementing the browser-compatibility logic themselves.

What You Get

• A CopyToClipboard component that wraps a single child element and adds click-to-copy behavior
• Cross-browser clipboard writes via the underlying copy-to-clipboard package (execCommand, IE clipboardData, prompt fallback)
• An onCopy(text, result) callback reporting the copied text and whether the write succeeded
• Pass-through of any existing onClick handler and other props on the wrapped child
• Support for copy-to-clipboard options like debug, message, and format

Common Use Cases

• Adding a Copy button next to a code snippet, API key, or shareable link
• Copying auto-generated text such as invite codes, coupon codes, or share URLs with a single click
• Building ‘copied!’ confirmation UI in forms or dashboards
• Wrapping icon buttons in documentation sites for one-click code copy

Under The Hood

Architecture The entire public surface is a single component, CopyToClipboard in src/Component.js, exported through src/index.js (which re-attaches it as a named property for CJS/ESM interop). It’s a React.PureComponent with no internal state: on click it calls copy(text, options) from the copy-to-clipboard package, invokes an optional onCopy(text, result) callback, then forwards the event to the wrapped child’s own onClick if one was already present. Rendering uses React.Children.only(children) plus React.cloneElement to attach the handler without introducing an extra DOM node, so the component’s entire contract is “clone the one child you give me.” Because that’s the whole abstraction, any change to the clone/wrap mechanism would break every consumer at once — there’s no internal layering to insulate them from it.

Tech Stack Built for React (peerDependencies: react >=15.3.0) with Babel (@babel/preset-env, @babel/preset-react) compiling src/ to a CommonJS lib/ output for publishing. Webpack 5 builds three variants of the demo/dist bundles (dev, dist, min, pub) for the GitHub Pages example. Biome replaces the older ESLint/Prettier combo for linting and formatting, Yarn 4 (Berry) is the package manager, and CircleCI runs the install/lint/test pipeline. Runtime dependencies are limited to copy-to-clipboard (the actual clipboard-write logic) and prop-types.

Code Quality The active test file (test/Component-test.js) only asserts that CopyToClipboard is a function — the substantial suite covering click behavior, onCopy invocation, and prop pass-through is present but entirely commented out, referencing an older TestUtils/DOM-rendering approach that was never ported to the current cloneElement-based implementation. So today there is effectively no behavioral test coverage, despite tape being wired up as the test runner. There’s no TypeScript; type safety comes only from PropTypes declarations on text, children, onCopy, and options. Naming and file layout are clean and consistent, and Biome plus a CircleCI pipeline are configured, but the lack of working tests is a real gap for a component this widely depended upon.

What Makes It Unique The library isn’t technically novel — it’s a thin, declarative wrapper around the copy-to-clipboard package’s imperative API, trading a few bytes of abstraction for React idiom (a component you wrap children in, rather than a function you call in an event handler). Its value is ergonomic simplicity and broad, well-tested browser fallback behavior inherited from its dependency, not any new technique of its own.