Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Failed to load latest commit information.

react-copy-to-clipboard npm


CircleCI Dependencies Dev Dependencies

Copy to clipboard React component

Based on copy-to-clipboard

Would try to use execCommand with fallback to IE specific clipboardData interface and finally, fallback to simple prompt with proper text content & 'Copy to clipboard: Ctrl+C, Enter'

Copy to clipboard



npm install --save react-copy-to-clipboard

Don't forget to manually install peer dependencies (react) if you use npm@3.

1998 Script Tag:

<script src=""></script>
<script src=""></script>
(Module exposed as `CopyToClipboard`)

Live design system demo

Simple web demo

Codepen demo


import React from 'react';
import ReactDOM from 'react-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';

class App extends React.Component {
  state = {
    value: '',
    copied: false,

  render() {
    return (
        <input value={this.state.value}
          onChange={({target: {value}}) => this.setState({value, copied: false})} />

        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <span>Copy to clipboard with span</span>

        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <button>Copy to clipboard with button</button>

        {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}

const appRoot = document.createElement('div');
ReactDOM.render(<App />, appRoot);


text: PropTypes.string.isRequired

Text to be copied to clipboard

onCopy: PropTypes.func

Optional callback, will be called when text is copied

onCopy(text, result)

result (bool): Returns true if copied successfully, else false.

options: PropTypes.shape({debug: bool, message: string})

Optional copy-to-clipboard options.

See API docs for details

children: PropTypes.node.isRequired

CopyToClipboard is a simple wrapping component, it does not render any tags, so it requires the only child element to be present, which will be used to capture clicks.

<CopyToClipboard text="Hello!">
  <button>Copy to clipboard</button>

Development and testing

Currently is being developed and tested with the latest stable Node 8 on OSX.

To run example covering all CopyToClipboard features, use yarn start, which will compile example/Example.js

git clone
cd react-copy-to-clipboard
yarn install
yarn start

# then
open http://localhost:8080


# to run ESLint check
yarn lint

# to run tests
yarn test

# to run end-to-end tests
# first, run `selenium/standalone-firefox:3.4.0` docker image
docker run -p 4444:4444 selenium/standalone-firefox:3.4.0
# then run test
yarn e2e