How to copy text to the clipboard in React.js ?
Last Updated :
16 Oct, 2023
Copying text to the clipboard in React JS is a common requirement in web applications, and React.js provides an easy way to accomplish this task. In this article, we will explore different methods to copy text to the clipboard in a React.js application.
Prerequisite for React JS Clipboard
Steps to create the React application
Step 1: Create React Project
npm create-react-app react-copy-text
Step 2: Change your directory and enter the react-copy-text directory by typing the given command in the terminal.
cd react-copy-text
Step 3: Install the dependencies required in this project by typing the given command in the terminal.
npm i --save styled-components react-copy-to-clipboard
Project Structure:
The updated dependencies in package.json will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"copy-to-clipboard": "^3.3.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"styled-components": "^6.0.9",
"web-vitals": "^2.1.4"
}
Approach 1: Using react-copy-to-clipboard
To copy text to the clipboard in React we will use the React library react-copy-to-clipboard which enables the copying of any text from the input box or value stored in any component.
Example: Created to input box and link the first input box value to a useState hook instance. Pass this value in teh copy method that trrigers when the given button is clicked.
Javascript
import Clipboard from "./components/Clipboard.js" ;
function App() {
return <Clipboard />;
}
export default App;
|
Javascript
import React, { useState } from "react" ;
import copy from "copy-to-clipboard" ;
import {
Heading,
Input1,
Input2,
Container,
Button,
} from "./Styles" ;
const Clipboard = () => {
const [copyText, setCopyText] = useState( "" );
const handleCopyText = (e) => {
setCopyText(e.target.value);
};
const copyToClipboard = () => {
copy(copyText);
alert(`You have copied "${copyText}" `);
};
return (
<div>
<Heading>GeeksforGeeks </Heading>
<Container>
<h2> Copy To Clipboard in React JS</h2>
<Input1
type= "text"
value={copyText}
onChange={handleCopyText}
placeholder= "Enter the text you want to copy"
/>
<Button onClick={copyToClipboard}>
Copy to Clipboard
</Button>
<Input2
type= "text"
placeholder= "Enter the text you have copied"
/>
</Container>
</div>
);
};
export default Clipboard;
|
Javascript
import styled from "styled-components" ;
export const Container = styled.div`
padding: 2%;
max-width: 600px;
margin: 40px auto;
position: relative;
text-align: center;
`;
export const Heading = styled.h1`
text-align: center;
color: green;
font-size: 40px;
`;
export const Input1 = styled.input`
height: 50px;
width: 80%;
padding: 0;
font-size: 25px;
border-radius: 5px;
`;
export const Input2 = styled.input`
height: 50px;
width: 80%;
padding: 0;
font-size: 25px;
margin-top: 50px;
border-radius: 5px;
`;
export const Button = styled.button`
padding: 10px;
font-size: 20px;
position: relative;
margin-top: 10px;
cursor: pointer;
color: white;
background-color: green;
border-radius: 10px;
`;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Approach 2: Using Navigator.clipbord method
Example:This approach includes the use of navigator.clipboard.writeText method to write the data. The value in the textbox will be copied to clipboard when the button is clicked.
Javascript
import Clipboard from "./components/Clipboard.js" ;
import "./App.css" ;
function App() {
return <Clipboard />;
}
export default App;
|
Javascript
import React, { useState } from "react" ;
const Clipboard = () => {
const [text, setText] = useState(
"Add text you want to copy"
);
const handleCopyClick = async () => {
try {
await navigator.clipboard.writeText(text);
alert( "Copied to clipboard!" );
} catch (err) {
console.error(
"Unable to copy to clipboard." ,
err
);
alert( "Copy to clipboard failed." );
}
};
return (
<div className= "App" >
<h1 className= "geeks" >GeeksforGeeks</h1>
<textarea
value={text}
onChange={(e) => setText(e.target.value)}
/>
<br />
<button onClick={handleCopyClick}>
Copy to Clipboard
</button>
<textarea />
</div>
);
};
export default Clipboard;
|
CSS
* {
margin : 0 ;
padding : 0 ;
box-sizing: border-box;
}
.App {
width : 100% ;
max-width : 90% ;
margin : auto ;
text-align : center ;
}
.geeks {
text-align : center ;
color : green ;
font-size : 40px ;
}
textarea {
height : 50px ;
width : 80% ;
padding : 0 ;
font-size : 25px ;
border-radius: 5px ;
margin : auto ;
margin-top : 2% ;
}
button {
margin : 2% ;
padding : 10px ;
font-size : 20px ;
position : relative ;
margin-top : 50px ;
cursor : pointer ;
color : white ;
background-color : green ;
border-radius: 10px ;
}
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Share your thoughts in the comments
Please Login to comment...