Package Exports

react-copy-to-clipboard

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-copy-to-clipboard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-copy-to-clipboard

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

NPM

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

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

Bower:

bower install --save https://npmcdn.com/react-copy-to-clipboard/bower.zip

or in bower.json

{
  "dependencies": {
    "react-copy-to-clipboard": "https://npmcdn.com/react-copy-to-clipboard/bower.zip"
  }
}

then include as

<script src="bower_components/react/react.js"></script>
<script src="bower_components/react-copy-to-clipboard/build/react-copy-to-clipboard.js"></script>

1998 Script Tag:

<script src="https://npmcdn.com/react/dist/react.js"></script>
<script src="https://npmcdn.com/react-copy-to-clipboard/build/react-copy-to-clipboard.js"></script>
(Module exposed as `CopyToClipboard`)

Demo

http://nkbt.github.io/react-copy-to-clipboard/example

Codepen demo

http://codepen.io/nkbt/pen/eNPoQv

Usage

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

const App = React.createClass({
  getInitialState() {
    return {value: '', copied: false};
  },

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

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

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

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

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

Options

`text`: React.PropTypes.string.isRequired

Text to be copied to clipboard

`onCopy`: React.PropTypes.func

Optional callback, will be called when text is copied

`children`: React.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>
</CopyToClipboard>

Development and testing

Currently is being developed and tested with the latest stable Node 5 on OSX and Windows. Should be ok with Node 4, but not guaranteed.

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

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

# then
open http://localhost:8080

Tests

npm test

# to run tests in watch mode for development
npm run test:dev

# to generate test coverage (./reports/coverage)
npm run test:cov

License

MIT