react-copy-button

react-copy-button

Copy to clipboard react button component. Demo: https://cham11ng.github.io/react-copy-button/

Install

yarn add react-copy-button

Usage

// Functional Component with useRef hook.
import React from "react";
import { useRef } from "react";
import { useState } from "react";

function App() {
  const imgRef = useRef();

  return (
    <React.Fragment>
      <div ref={imgRef}>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2000px-React-icon.svg.png" />
      </div>
      <CopyButton imgRef={imgRef}>Copy Image</CopyButton>
      <CopyButton text="Text to copy">Copy Text</CopyButton>
    </React.Fragment>
  );
}

// Class Component
import * as React from "react";

import CopyButton from "react-copy-button";

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.imgRef = React.createRef();
  }

  render() {
    return (
      <React.Fragment>
        <div ref={this.imgRef}>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2000px-React-icon.svg.png" />
        </div>
        <CopyButton imgRef={this.imgRef}>Copy Image</CopyButton>
        <CopyButton text="Text to copy">Copy Text</CopyButton>
      </React.Fragment>
    );
  }
}

Browser compatibility

For browser compatibility check here.

License

MIT © cham11ng