THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
This tutorial covers copy text to the clipboard using below two methods
- navigator.clipboard
- react-copy-to-clipboard npm
navigator object in javascript provides browser capabilities, It has a clipboard API interface for accessing the system clipboard, and It provides cut, copies, and pastes functionalities of the native operating system. However, a clipboard is a short content buffer that exists across multiple pages or requests.
Copy text to clipboard using navigator
System clipboard in react can be accessed using Navigator.clipboard API.
The writeText method provides writing content to the clipboard.
Navigator support all major browsers.
In this example,
- There is a textbox and button on a page and a button click to copy the text to the clipboard
- user enters the text into the textbox, event handler
onChangefires, and stores this into react state. - On clicking the button, the onClick event fires, and its event handler executes
- Inside handler, Copy textbox value into clipboard using
writeTextmethod
import React, { Component } from 'react';
class CopyToClipboard extends Component {
constructor(props) {
super(props);
this.state = {
result: "",
name: ""
}
// this.updateInput = this.updateInput.bind(this);
// this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange = (event) => {
this.setState({ name: event.target.value })
}
handleSubmit(event) {
console.log('kiran', event.target.value)
try {
navigator.clipboard.writeText(event.target.value);
this.setState({
result: "Copied To clipboard"
});
} catch (err) {
this.setState({
result: "Copy Failed"
});
}
}
render() {
return (
<div>
<input type="text" onChange={this.updateInput} />
<button onClick={this.handleSubmit}>Copy text</button>
<div>
status : {this.state.result}
</div>
</div>
);
}
}
export default CopyToClipboard;
The same functionality can be achieved with the popular react-copy-to-clipboard npm library
react-copy-to-clipboard example
First, Install the react-copy-to-clipboard library to the existing react application with the below npm command.
npm install --save react react-copy-to-clipboard
CopyToClipboard is a wrapper or container for a button that contains text attribute with content and result callback with onCopy attribute. It has a button as a child element.
Call-back events function to bind the typed text.
Complete example:
import React, { Component } from 'react';
class CopyToClipboard extends Component {
constructor(props) {
super(props);
this.state = {
result: "",
name: ""
}
}
handleChange = (event) => {
this.setState({ name: event.target.value })
}
copyStatus() {
this.setState({
result: "Copied"
});
}
render() {
return (
<div>
<input type="text" onChange={this.updateInput} />
<CopyToClipboard text={this.state.name} onCopy={this.copyStatus}>
<button>Copy</button>
</CopyToClipboard>
<div>
status : {this.state.result}
</div>
</div>
);
}
}
export default CopyToClipboard;
