react-copy-to-clipboard)

![Gitter](https://gitter.im/nkbt/help)

![CircleCI](https://circleci.com/gh/nkbt/react-copy-to-clipboard)
![Dependencies](https://david-dm.org/nkbt/react-copy-to-clipboard)
![Dev Dependencies](https://david-dm.org/nkbt/react-copy-to-clipboard#info=devDependencies)

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

Installation

$3

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

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

`$3`

html


(Module exposed as

CopyToClipboard


Live design system demo
https://www.jinno.io/app/18/
Simple web demo
http://nkbt.github.io/react-copy-to-clipboard
Codepen demo
http://codepen.io/nkbt/pen/eNPoQv
Usage

js
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 (
      

                  onChange={({target: {value}}) => this.setState({value, copied: false})} />
                  onCopy={() => this.setState({copied: true})}>
          Copy to clipboard with span
        
                  onCopy={() => this.setState({copied: true})}>
          
        
        {this.state.copied ? Copied. : null}
      

    );
  }
}

const appRoot = document.createElement('div'); document.body.appendChild(appRoot); ReactDOM.render(, appRoot);`

`Options`

####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.

`js`

`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

`bash git clone git@github.com:nkbt/react-copy-to-clipboard.git cd react-copy-to-clipboard yarn install yarn start

`then`


open http://localhost:8080


Tests

`bash

`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

License

MIT

react-copy-to-clipboard ![npm](https://www.npmjs.com/package/react-copy-to-clipboard)

![Gitter](https://gitter.im/nkbt/help)

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

Installation

$3

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

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

`$3`

html


(Module exposed as

CopyToClipboard


Live design system demo
https://www.jinno.io/app/18/
Simple web demo
http://nkbt.github.io/react-copy-to-clipboard
Codepen demo
http://codepen.io/nkbt/pen/eNPoQv
Usage

js
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 (
      

                  onChange={({target: {value}}) => this.setState({value, copied: false})} />
                  onCopy={() => this.setState({copied: true})}>
          Copy to clipboard with span
        
                  onCopy={() => this.setState({copied: true})}>
          
        
        {this.state.copied ? Copied. : null}
      

    );
  }
}

const appRoot = document.createElement('div'); document.body.appendChild(appRoot); ReactDOM.render(, appRoot);`

`Options`

####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.

`js`

`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

`bash git clone git@github.com:nkbt/react-copy-to-clipboard.git cd react-copy-to-clipboard yarn install yarn start

`then`


open http://localhost:8080


Tests

`bash

`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

License

MIT

react-copy-to-clipboard

react-copy-to-clipboard ![npm](https://www.npmjs.com/package/react-copy-to-clipboard)

Installation

$3

$3

Live design system demo

Simple web demo

Codepen demo

Usage

Options

Development and testing

then

Tests

to run ESLint check

to run tests

to run end-to-end tests

first, run selenium/standalone-firefox:3.4.0 docker image

then run test

License

react-copy-to-clipboard

react-copy-to-clipboard ![npm](https://www.npmjs.com/package/react-copy-to-clipboard)

Installation

$3

$3

Live design system demo

Simple web demo

Codepen demo

Usage

Options

Development and testing

then

Tests

to run ESLint check

to run tests

to run end-to-end tests

first, run selenium/standalone-firefox:3.4.0 docker image

then run test

License

`$3`

`Options`

`Development and testing`

`then`

`to run ESLint check`

`first, run` selenium/standalone-firefox:3.4.0 `docker image`

`$3`

`Options`

`Development and testing`

`then`

`to run ESLint check`

`first, run` selenium/standalone-firefox:3.4.0 `docker image`