React js copy text to clipboard example. In this tutorial, you will learn how to copy text to your clipboard using React JS.
You must have noticed that many apps have a copy-to-clipboard button to copy text. So that you can copy the text easily. And you can paste copy text anywhere. You don’t even need to select the text to copy.
How to Copy Text to Clipboard Using ReactJS
Just follow the following steps and to copy text to your clipboard using React JS:
- Step 1 – Create React App
- Step 2 – Install Copy to Clipboard and Bootstrap 4 Package
- Step 3 – Create Copy Clipboard Component
- Step 4 – Add Component in App.js
Step 1 – Create React App
In this step, open your terminal and execute the following command on your terminal to create a new react app:
npx create-react-app my-react-app
To run the React app, execute the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install Copy to Clipboard and Bootstrap 4 Package
In this step, execute the following commands to install react copy to clipboard and boostrap 4 library into your react app:
npm install bootstrap --save npm install save copy-to-clipboard
Then, Add react router and bootstrap.min.css file in src/App.js
file:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<h2>How to Copy Text to Clipboard Using ReactJS</h2>
</div>
);
}
export default App;
Step 3 – Create Copy Clipboard Component
In this step, visit the src directory of your react js app and create a copy text to the clipboard component named clipboard.js. And add the following code into it:
import React, { Component } from "react";
import copy from "copy-to-clipboard";
import "./App.css";
Class CopyBoard extends Component {
constructor() {
super();
this.state = {
textToCopy: "Copy to Clipboard Demo!",
};
this.handleInputChange = this.handleInputChange.bind(this);
this.Copytext = this.Copytext.bind(this);
}
handleInputChange(e) {
this.setState({
textToCopy: e.target.value,
});
}
Copytext() {
copy(this.state.textToCopy);
}
render() {
const { textToCopy, btnText } = this.state;
return (
<div className="container">
<div class="row" className="hdr">
<div class="col-sm-12 btn btn-info">Copy to Clipboard Demo</div>
</div>
<div className="txt">
<textarea
className="form-control"
placeholder="Enter Text"
onChange={this.handleInputChange}
/>
<br />
<br />
<button className="btn btn-info" onClick={this.Copytext}>
Copy to Clipboard
</button>
</div>
</div>
);
}
}
export default CopyBoard;
Now, Open app.css file and add the following CSS in this file:
.txt
{
margin-bottom: 20px;
margin-top: 20px;
}
.hdr
{
margin-top: 20px;
}
Step 4 – Add Component in App.js
In this step, you need to add clipboard.js file in src/App.js
file:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Clipboard from './Clipboard'
function App() {
return (
<div className="App">
<Clipboard />
</div>
);
}
export default App;
Conclusion
React js copy text to clipboard example. In this tutorial, you have learn how to copy text to your clipboard using React JS using save copy-to-clipboard.