Copy text to the Clipboard in React without a package
Today we’ll show you how to copy text to the clipboard in React without a package. In the previous article we show you how to Copy text to the Clipboard in ReactJS using NPM Package.
Let’s take an example where we will render the textbox and button component to perform the demo.
Steps: Copy text to the clipboard
1. Create react app
First, we will have a simple react application. For that use the following command to set up the startup react application.
1 | npx create-react-app copy-text-clipboard-without-package |
2. Design a page
To design a page, we will use the textarea for entering the text and button for copy to clipboard.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | import React, { Component } from "react"; class App extends Component { constructor(props) { super(props); this.state = { message: "Copy text to the Clipboard in React without a package - Clue Mediator" } } // handle copy to clipboard copyToClipboard = e => { }; render() { return ( <div> <h3>Copy text to Clipboard - <a href="https://www.cluemediator.com">Clue Mediator</a></h3> <textarea value={this.state.message} onChange={e => this.setState({ message: e.target.value })} /> <br /> <br /> <button onClick={this.copyToClipboard}>Copy to Clipboard</button> </div> ); } } export default App; |
3. Implement logic for copy text to the clipboard
Let’s do a couple of changes in the App
component to implement the logic. Use the ref
attribute for textarea
to invoke the select method. Manage the state variable for button click to show the text has been copied. At last write a logic for copy text to clipboard on click event of the button.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | import React, { Component } from "react"; class App extends Component { constructor(props) { super(props); this.state = { message: "Copy text to the Clipboard in React without a package - Clue Mediator", btnText: "Copy to Clipboard" } } // handle copy to clipboard copyToClipboard = e => { this.refs.textArea.select(); document.execCommand('copy'); e.target.focus(); this.setState({ btnText: 'Copied!' }); }; render() { const { message, btnText } = this.state; return ( <div> <h3>Copy text to Clipboard - <a href="https://www.cluemediator.com">Clue Mediator</a></h3> <textarea ref="textArea" value={message} onChange={e => this.setState({ message: e.target.value, btnText: "Copy to Clipboard" })} /> <br /> <br /> {document.queryCommandSupported('copy') && <button onClick={this.copyToClipboard}>{btnText}</button>} </div> ); } } export default App; |
Here we have used the Logical AND Operator to display the button.
4. Output
That’s it for today.
Thank you for reading. Happy Coding..!!
document.refs is deprecated. What alternatives can be used here?
Hi Shanmukha, You can use the
React.createRef()
for the class component or use theuseRef
for the hooks.Nice.
But execCommand is deprecated.
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
Thanks for drawing our attention.