How to copy text to the clipboard in React.js ?

12 Mar, 2021
The following example covers how to copy text to the clipboard in React JS using useState() hook.
Prerequisite:
Basic knowledge of npm & create-react-app command.
Basic knowledge of styled-components.
Basic Knowledge of useState() React hooks.
Basic Setup: You will start a new project using create-react-app using the following command:
npx create-react-app react-copy-text
Now go to your react-copy-text folder by typing the given command in the terminal.
cd react-copy-text
Required module: Install the dependencies required in this project by typing the given command in the terminal.
npm install --save styled-components
npm install --save react-copy-to-clipboard
Now create the components folder in src then go to the components folder and create two files Clipboard.js and Styles.js.
Project Structure: The file structure in the project will look like this.
Example: We create a state with the first element copyText as an initial state having a value of the empty string and the second element as function setCopyText() for updating the state. Then a function is created by the name handleCopyText which sets the state value to the text we enter the input field. Another function copyToClipboard is created to copy the updated state value to the clipboard.
When we enter a text in our input field, handleCopyText function gets triggered through onChange event which sets the state to that entered value. Now when we click on the button ‘Copy to Clipboard’, the function copyToClipboard gets triggered through onClick event which copies the state value to the clipboard with copy() function. Now we can copy our text anywhere by just clicking Ctrl+V key.
Clipboard.js
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>          <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;
Styles.js
import styled from 'styled-components';  export const Container = styled.div`   width: 600px;   margin: 40px auto;   position: relative;`export const Heading = styled.h1`   text-align: center;   color: green;`;  export const Input1 = styled.input`   height: 50px;   width: 100%;   padding: 0;   font-size: 25px;`export const Input2 = styled.input`   height: 50px;   width: 100%;   padding: 0;   font-size: 25px;   margin-top: 70px;`  export const Button = styled.button`   padding: 20px;   font-size: 20px;   position: relative;   left: 30%;   margin-top: 10px;   cursor: pointer;`;
App.js
import Clipboard from './components/Clipboard'  function App() {  return (    <Clipboard />  );}  export default App;
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:
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS useNavigate() Hook
How to install bootstrap in React.js ?
How to create a multi-page website using React.js ?
How to do crud operations in ReactJS ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Differences between Functional Components and Class Components in React