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-copy-to-clipboard

bower

bower install --save react-copy-to-clipboard

Usage

import React from 'react';
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})}>
          <button>Copy to clibpoard</button>
        </CopyToClipboard>&nbsp;


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

      </div>
    );
  }
});


React.render(<App />, document.body);

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, id does not render any tags, so it requires one child element to be present, which will be used to capture clicks.

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

Development and testing

To run comprehensive example covering all InFlux 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

Demo

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

Codepen demo

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

Tests

Only UI tests for now, see demo

License

MIT