Copy the text to the clipboard in React

Use the navigator.clipboard.writeText() function.

For example, let's assume that you create an input with a button to copy the text on click:

jsx
import React, { useState } from 'react';

const CopyToClipboard = () => {
    
    const [text, setText] = useState('');
    
    const copyText = () => {
        
        navigator.clipboard.writeText(text);
        
    }
    
    return(
        <div className = 'CopyToClipboard'>
            <input  onChange = {(e) => setText(e.target.value)} value = {text}/>
            <button onClick = {copyText}>Click to copy</button>
        </div>
    );
    
}

export default CopyToClipboard;

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.