React JS copy teks ke clipboard contoh. Dalam tutorial ini, Anda akan belajar cara menyalin teks ke clipboard Anda menggunakan React JS.
Anda pasti telah memperhatikan bahwa banyak aplikasi memiliki tombol copy-to-clipboard untuk menyalin teks. Sehingga Anda dapat menyalin teks dengan mudah. Dan Anda dapat menempelkan teks salinan di mana saja. Anda bahkan tidak perlu memilih teks untuk disalin.
Table of Contents
Buat Aplikasi React
Pada langkah ini, buka terminal Anda dan jalankan perintah berikut di terminal Anda untuk membuat aplikasi react baru:
npx create-react-app my-react-app
Untuk menjalankan aplikasi React, jalankan perintah berikut di terminal Anda:
npm start
Install Copy to Clipboard & Bootstrap 4 Package
Pada langkah ini, jalankan perintah berikut untuk menginstal react copy ke clipboard dan boostrap 4.
npm install bootstrap --save
npm install save copy-to-clipboard
Kemudian, Tambahkan react router dan file bootstrap.min.css di 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;
Buat Copy Clipboard Component
Pada langkah ini, kunjungi direktori src dari aplikasi react js Anda dan buat teks salinan ke komponen clipboard bernama clipboard.js. Dan tambahkan kode berikut ke dalamnya:
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;
Sekarang, Buka file app.css dan tambahkan CSS berikut di file ini:
.txt
{
margin-bottom: 20px;
margin-top: 20px;
}
.hdr
{
margin-top: 20px;
}
Tambahkan Component di App.js
Pada langkah ini, Anda perlu menambahkan file clipboard .js dalam 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;
Dalam tutorial ini, Anda telah belajar cara menyalin teks ke clipboard Anda menggunakan React JS menggunakan save copy-to-clipboard.
copy clipboard react js tutorial react js react js tutorial