How to copy text to clipboard in React example


This tutorials covers copy text to clipboard using below two methods

  • navigator.clipboard
  • react-copy-to-clipboard npm

navigator object in javascript provides browser capabilities, It has clipboard API interface for accessing System clipboard, It provides cut,copy and paste functionalities of native operating system. However clipboard is short content buffer exist across multiple pages or request.

Copy text to clipboard using navigator

System clipboard in react can be accessed using Navigator.clipboard API’s. writeText method provides write a content to clipboard.

Navigator support all major browsers.

In this example,

  • There is an textbox and button on a page and button click copy the text to clipboard
  • user enters the text into textbox, event handler onChange fires and stores this into react state.
  • On clicking button, onClick event fires and it’s event handler executes
  • Inside handler, Copy textbox value into clipboard using writeText method
import React, { Component } from 'react';

class CopyToClipboard extends Component {
    constructor(props) {
        super(props);

        this.state = {
            result: "",
            name: ""
        }
        // this.updateInput = this.updateInput.bind(this);
        // this.handleSubmit = this.handleSubmit.bind(this);

    }

    handleChange = (event) => {
        this.setState({ name: event.target.value })
    }
    handleSubmit(event) {
        console.log('kiran', event.target.value)
        try {
            navigator.clipboard.writeText(event.target.value);
            this.setState({
                result: "Copied To clipboard"
            });

        } catch (err) {
            this.setState({
                result: "Copy Failed"
            });
        }
    }


    render() {
        return (
            <div>
                <input type="text" onChange={this.updateInput} />

                <button onClick={this.handleSubmit}>Copy text</button>
                <div>
                    status : {this.state.result}
                </div>
               
            </div>
        );
    }
}

export default CopyToClipboard;

The same functionality can be achieved with popular react-copy-to-clipboard npm library

react-copy-to-clipboard example

First, Install react-copy-to-clipboard library to existing react application with below npm command.

npm install --save react react-copy-to-clipboard

CopyToClipboard is wrapper or container for a button which contains text attribute with content and result callback with onCopy attribute. It has a button as a child element.

Call back events functions to bind the typed text.

Complete example:

import React, { Component } from 'react';

class CopyToClipboard extends Component {
    constructor(props) {
        super(props);

        this.state = {
            result: "",
            name: ""
        }
    

    }

    handleChange = (event) => {
        this.setState({ name: event.target.value })
    }

    copyStatus() {
        this.setState({
            result: "Copied"
        });
    }


    render() {
        return (
            <div>
                <input type="text" onChange={this.updateInput} />

                <CopyToClipboard text={this.state.name} onCopy={this.copyStatus}>
                    <button>Copy</button>
                </CopyToClipboard>
                <div>
                    status : {this.state.result}
                </div>

            </div>
        );
    }
}

export default CopyToClipboard;
Similar Posts