React.js Clipboard.js Example to Copy Text to Clipboard From Input Field or Textarea Widget on Button Click in Browser Using TypeScript Full Project For Beginners

 

 

 

npm i copy-clipboard-js

 

 

 

App.js

 

 

import React, { Component } from "react";
import * as CCJ from "copy-clipboard-js";

export default class App extends Component {
  state = {
    text: ""
  };

  constructor(props) {
    super(props);
    this.copy = this.copy.bind(this);
    this.onC = this.onC.bind(this);
  }

  onC(e) {
    this.setState({ text: e.target.value });
  }

  copy() {
    CCJ.copyText(this.state.text, true);
  }

  render() {
    return (
      <div className="App">
        <h1>Using copy-clipboard-js to copy text</h1>
        <h6>
          Write something and click copy, text will be copied to clipboard
        </h6>
        <input type="text" onChange={this.onC} />
        <button onClick={this.copy}>Copy</button>
        <a href="https://github.com/maifeeulasad/react.js-copy-clipboard">
          <h6>ⒸMUA</h6>
        </a>
        <h5>"copy-clipboard-js": "^1.0.3"</h5>
      </div>
    );
  }
}

Leave a Reply