Skip to content
Related Articles

Related Articles

Improve Article

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

  • Difficulty Level : Hard
  • Last Updated : 12 Mar, 2021
Geek Week

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :