In this article, we will see how to copy text to the clipboard in react js. you will learn how to copy text to your clipboard using react js. 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 want.
So, let's see a copy to clipboard react js or javascript copy to clipboard react
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
In this step, we will 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
In this step, we will install react copy to the clipboard and bootstrap 4 libraries into 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
the 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 In React JS - Websolutionstuff</h2>
</div>
);
}
export default App;
In this step, we will create a copy text to the clipboard component named clipboard.js.
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">How To Copy Text To Clipboard In React JS</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 the app.css file and add the following CSS to this file.
.txt
{
margin-bottom: 20px;
margin-top: 20px;
}
.hdr
{
margin-top: 20px;
}
In this step, you need to add the clipboard.js file to src/App.js
the 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;
You might also like:
In this article, we will see a stripe payment gateway integration example in laravel 8. The stripe payment gateway...
Nov-26-2020
In this artical we will see laravel 9 yajra datatable example. As we all used datatable on our backend side project, Her...
Mar-10-2022
In this article, we will see laravel 8 socialite login with a google account. This post gives you an example of a larave...
Dec-01-2020
In this example we will see autocomplete search using bootstrap typeahead js.Typeahead search is a method for progr...
Jun-09-2021