copy text in react code example
Example 1: copy text to clipboard reactjs
import React, { useRef, useState } from 'react';
export default function CopyExample() {
const [copySuccess, setCopySuccess] = useState('');
const textAreaRef = useRef(null);
function copyToClipboard(e) {
textAreaRef.current.select();
document.execCommand('copy');
// This is just personal preference.
// I prefer to not show the the whole text area selected.
e.target.focus();
setCopySuccess('Copied!');
};
return (
<div>
{
/* Logical shortcut for only displaying the
button if the copy command exists */
document.queryCommandSupported('copy') &&
<div>
<button onClick={copyToClipboard}>Copy</button>
{copySuccess}
</div>
}
<form>
<textarea
ref={textAreaRef}
value='Some text to copy'
/>
</form>
</div>
);
}
Example 2: copy text using react js
import React, { Component } from "react"
export default class YourComponent extends Component {
constructor(props) {
super(props)
this.state = {
copySuccess: false
}
}
copyCodeToClipboard = () => {
const el = this.textArea
el.select()
document.execCommand("copy")
this.setState({copySuccess: true})
}
render() {
return (
<div>
<div>
<textarea
ref={(textarea) => this.textArea = textarea}
value="Example copy for the textarea."
/>
</div>
<div>
<button onClick={() => this.copyCodeToClipboard()}>
Copy to Clipboard
</button>
{
this.state.copySuccess ?
<div style={{"color": "green"}}>
Success!
</div> : null
}
</div>
</div>
)
}
}