Component to allow user to easily copy text to clipboard
JavaScript
Latest commit 78e3650 Oct 13, 2016 @WickyNilliams 1.2.2
Permalink
Failed to load latest commit information.
.gitignore update to react 0.12.2 Jan 20, 2015
.jshintrc initial commit Sep 11, 2014
LICENSE initial commit Sep 11, 2014
README.md add demo to readme Oct 13, 2016
index.js use better css for visibly hiding textarea Oct 13, 2016
package.json 1.2.2 Oct 13, 2016

README.md

react-clipboard

Component to allow the user to easily copy text. Based on the idea from Trello, described in this StackOverflow question: How does Trello access the user's clipboard?

Demo

Live demo here: https://jsfiddle.net/WickyNilliams/umedeLw1/

Install

npm install react-clipboard --save

Usage

var React = require("react");
var ReactDOM = require("react-dom");
var Clipboard = require("react-clipboard");

var App = React.createClass({

  render: function() {
    var value = JSON.stringify(this.props.data, null, "  ");

    return (
      <div>
        <p>Press Cmd + C to copy:</p>
        <pre>{value}</pre>
        <Clipboard value={value} onCopy={this.handleCopy} />
      </div>
    );
  },

  handleCopy : function(e) {
    console.log("copied", e);
  }

});

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

Further info

This component renders a textarea, whose value is the value prop. On keydown, if the user hasn't currently selected any text on the page and the cmd or ctrl key is pressed, then the textarea is focussed and the text inside it is selected. When the user hits the c key, the text inside the textarea is copied.

Inline styling is used to visibly hide the textarea. This can be overriden via the style prop.