diff --git a/package.json b/package.json
index c417bf0..65b3d2d 100644
--- a/package.json
+++ b/package.json
@@ -108,8 +108,9 @@
"normalize.css": "^4.1.1",
"postcss-loader": "^0.9.0",
"query-string": "^4.1.0",
- "react": "^15.0.0",
+ "react": "^15.1.0",
"react-climb-social": "^2.0.0-alpha.4",
+ "react-copy-to-clipboard": "^4.1.0",
"react-dom": "^15.0.0",
"react-redux": "^4.0.0",
"react-router": "^2.2.0",
diff --git a/src/components/EmbedCode/EmbedCode.js b/src/components/EmbedCode/EmbedCode.js
index 2806859..4aac1a3 100644
--- a/src/components/EmbedCode/EmbedCode.js
+++ b/src/components/EmbedCode/EmbedCode.js
@@ -1,5 +1,6 @@
import React, { PropTypes } from 'react';
import format from 'string-template';
+import CopyToClipboard from 'react-copy-to-clipboard';
const template = `
@@ -10,13 +11,43 @@ const template = `
`.replace(/\r?\n|\r/g, '');
-const EmbedCode = ({ collectionId: id, layoutName: layout }) => (
- {format(template, { id, layout })}
-);
+export class EmbedCode extends React.Component {
+ static propTypes = {
+ collectionId: PropTypes.string.isRequired,
+ layoutName: PropTypes.string.isRequired,
+ onCopy: PropTypes.func,
+ };
-EmbedCode.propTypes = {
- collectionId: PropTypes.string.isRequired,
- layoutName: PropTypes.string.isRequired,
-};
+ state = {
+ copied: false,
+ };
+
+ getText() {
+ const { collectionId: id, layoutName: layout } = this.props;
+ return format(template, { id, layout });
+ }
+
+ handleCopy() {
+ const { onCopy } = this.props;
+ if (onCopy) onCopy();
+ this.setState({copied: true}, () => setTimeout(() => this.setState({copied: false}), 100));
+ }
+
+ render() {
+ const text = this.getText();
+ const { copied } = this.state;
+
+ return (
+
{text}
+