andriajah Wed Apr 2022 11 months ago

Contoh Cara Copy Text ke Clipboard di React JS

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.

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