react-clipboard demo

by WickyNilliams

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.clipboard {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
  padding: 0;
  margin: 0;
  z-index: 100;
  opacity: 0;
}

JavaScript 1.7

function noop() {}

var Clipboard = React.createClass({

  propTypes: {
    value : React.PropTypes.string.isRequired,
    className : React.PropTypes.string,
    style : React.PropTypes.object,
    onCopy : React.PropTypes.func
  },

  getDefaultProps: function() {
    return {
      className : "clipboard",
      style : {
        position : "fixed",
        overflow : "hidden",
        clip     : "rect(0 0 0 0)",
        height   : 1,
        width    : 1,
        margin   : -1,
        padding  : 0,
        border   : 0
      },
      onCopy : noop
    };
  },

  componentDidMount: function() {
    document.addEventListener("keydown", this.handleKeyDown, false);
    document.addEventListener("keyup", this.handleKeyUp, false);
  },

  componentWillUnmount: function() {
    document.removeEventListener("keydown", this.handleKeyDown, false);
    document.removeEventListener("keyup", this.handleKeyUp, false);
  },

  render: function() {
    return <textarea {...this.props} readOnly={true} onCopy={this.handleCopy} />
  },

  handleCopy : function(e) {
    this.props.onCopy(e);
  },

  handleKeyDown : function(e) {
    var metaKeyIsDown = (e.ctrlKey || e.metaKey);
    var textIsSelected = window.getSelection().toString();

    if(!metaKeyIsDown || textIsSelected) {
      return;
    }

    var element = ReactDOM.findDOMNode(this);
    element.focus();
    element.select();
  },

  handleKeyUp : function(e) {
    var element = ReactDOM.findDOMNode(this);
    element.blur();
  }

});

var App = React.createClass({

  render: function() {
    var text = JSON.stringify(this.props.data, null, "  ");
    return (
      <div>
        <p>Press Cmd + C to copy:</p>
        <pre>{text}</pre>
        <Clipboard value={text} />
      </div>
    );
  }
});

var data = { foo : 1, bar : 2 };
ReactDOM.render(<App data={data} />, document.body);