Copy to clipboard button

examples/copy-button.jsx

@@ -0,0 +1,17 @@
+const CopyForm = React.createClass({
+    _getTarget: function() {
+        return this.targetElement;
+    },
+    render: function() {
+        return (
+            <div>
+                <input placeholder="type something"
+                    ref={(ref) => this.targetElement = ref}
+                />
+                <CopyButton targetElement={this._getTarget}/>
+            </div>
+        );
+    },
+});
+
+return <CopyForm />;

js/copy-button.jsx

@@ -0,0 +1,79 @@
+const React = require("react");
+
+/* Copy to clipboard button
+ * attach to input, textarea or any other "text container" (div, span, label..)
+ */
+const CopyButton = React.createClass({
+    propTypes: {
+        className: React.PropTypes.string,
+        defaultLabel: React.PropTypes.string,
+        didCopyLabel: React.PropTypes.string,
+        notSupportedLabel: React.PropTypes.string,
+        notSupportedLabelMac: React.PropTypes.string,
+        targetElement: React.PropTypes.func.isRequired,
+    },
+    getDefaultProps: function() {
+        return {
+            defaultLabel: "Copy",
+            didCopyLabel: "Copied",
+            notSupportedLabel: "Ctrl+C to copy",
+            notSupportedLabelMac: "⌘-C to copy",
+        };
+    },
+    getInitialState: function() {
+        return {text: this.props.defaultLabel};
+    },
+    _copy: function() {
+        const element = this.props.targetElement();
+        const selection = window.getSelection();
+
+        if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
+            element.focus();
+            element.setSelectionRange(0, element.value.length);
+        } else {
+            const range = document.createRange();
+            range.selectNodeContents(element);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+
+        const result = document.execCommand('copy');
+        this._handleResult(result, selection);
+    },
+    _handleResult: function(result, selection) {
+        let label;
+        if (!result) {
+            if (navigator.platform.indexOf("Mac") !== -1) {
+                label = this.props.notSupportedLabelMac;
+            } else {
+                label = this.props.notSupportedLabel;
+            }
+        } else {
+            label = this.props.didCopyLabel;
+            this.props.targetElement().blur();
+            selection.removeAllRanges();
+        }
+
+        this.setState({
+            text: label,
+        });
+        const _this = this;
+        setTimeout(function() {
+            _this.setState({
+                text: _this.props.defaultLabel,
+            });
+        }, 1000);
+    },
+    render: function() {
+        return (
+            <button
+                className={this.props.className}
+                onClick={this._copy}
+            >
+              {this.state.text}
+            </button>
+        );
+    },
+});
+
+module.exports = CopyButton;

reactify-components.jsx

@@ -25,6 +25,7 @@ window.TimeAgo                = require("./js/timeago.jsx");
 window.TimeoutTransitionGroup = require("./js/timeout-transition-group.jsx");
 window.Tooltip                = require("./js/tooltip.jsx");
 window.WindowDrag             = require("./js/window-drag.jsx");
+window.CopyButton             = require("./js/copy-button.jsx");
 
 // Create a <ReactPlayground> for each example.
 var examples = document.querySelectorAll('div.example_div');

template.html

@@ -161,6 +161,7 @@ <h2>Components</h2>
                 <li><a href="#timeout-transition-group">Timeout Transition Group</a></li>
                 <li><a href="#backbone-mixin">Backbone Mixin</a></li>
                 <li><a href="#window-drag">Window Drag</a></li>
+                <li><a href="#copy-button">Copy to clipboard button</a></li>
             </ul>
             </div>
         </nav>
@@ -257,6 +258,12 @@ <h3 id="window-drag">Window Drag</h3>
         <p>Detect drags into and out of the page.</p>
         {% code_example "window-drag.jsx" %}
 
+        <h3 id="copy-button">Copy to clipboard button</h3>
+        {{ stability("experimental") }}
+        {{ depends([]) }}
+        <p>Copies input, textarea or other text content to clipboard.</p>
+        {% code_example "copy-button.jsx" %}
+
         <h3 id="timeout-transition-group">Timeout Transition Group</h3>
         {{ stability("unstable") }}
         {{ depends([("http://jquery.com/", "jQuery")]) }}