ReactJS component: Copy to clipboard

README.md

ReactJS CopyToClipboard component

The need to copy something to the clipboard can be handled easily using this component: CopyToClipboard.

Demo

View a running demo on CodePen

Using it

1. Add the component <CopyToClipboard />

This is the simplest form using defaultProps, which will show you how it works. You will want to change the props:

CopyToClipboard.defaultProps = {
	label: "Copy",
	silent: false,
	text: "Set prop 'text' to your text to copy, or add call back function 'onCopy' which returns the value to copy",
	onCopy: txt => {
	  // return "Nothing to copy "+new Date();
	  return txt;
	}
};

Label ("copy")

What to show in the button

silent ("false")

Should a prompt be shown with the copied content?

text ("some default text")

One way to use the component is to provide in a prop the text to copy.

onCopy ("will return value of text prop")

You can provide a function which should then return a text which will be copied to clipboard The function will be called with the value of text property.

Example of use

I have made a ReactJS pen which is using this component.

Feedback

Send your feedback to me on twitter: @netsi1964

Thanks to:

Karol Falkiewicz, Michael Code Nielsen

CopyToClipboard.jsx

class CopyToClipboard extends React.Component {
	copy() {
		const textarea = this.textarea;
		let { text, onCopy, silent } = this.props;
		silent =
			typeof silent === "boolean" ||
			silent.toLowerCase() == "true" ||
			silent == "1";
		textarea.value = onCopy.call(this, text);
		textarea.select();

		try {
			const successful = document.execCommand("copy");
			const msg = successful ? "successful" : "unsuccessful";
			if (!silent) {
				prompt("Copying text command was " + msg, textarea.value);
			}
		} catch (err) {
			alert(`Oops, unable to copy (${err.message})`);
		}
	}
	render() {
		const { label } = this.props;
		const attr = {
			style: this.props.style,
			className: this.props.className,
		}
		return (
			<p>
				<button onClick={() => this.copy()} {...attr}>
					{label}
				</button>
				<textarea
					ref={textarea => {
						this.textarea = textarea;
					}}
					style={{ position: "absolute", top: "-1000px" }}
				/>
			</p>
		);
	}
}
CopyToClipboard.defaultProps = {
	label: "Copy",
	silent: false,
	text:
		"Set prop 'text' to your text to copy, or add call back function 'onCopy' which returns the value to copy",
	onCopy: txt => {
		// return "Nothing to copy "+new Date();
		return txt;
	}
};

CopyToClipboard.propTypes = {
	className: React.PropTypes.string,
	style: React.PropTypes.object,
	label: React.PropTypes.string,
	text: React.PropTypes.string,
	onCopy: React.PropTypes.func,
	silent: React.PropTypes.oneOfType([
		React.PropTypes.string,
		React.PropTypes.boolean
	])
};