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 imageRef = useRef();
  const url =
    'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2000px-React-icon.svg.png';

  return (
    <React.Fragment>
      <div ref={imageRef}>
        <img src={url} />
      </div>
      <CopyButton imageRef={imageRef}>Copy Image</CopyButton>

      <CopyButton text="Text to copy">Copy Text</CopyButton>
      <CopyButton imageURL={url}>Copy Image (New)</CopyButton>
    </React.Fragment>
  );
}

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

import CopyButton from 'react-copy-button';

const url =
  'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2000px-React-icon.svg.png';

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

    this.imageRef = React.createRef();
  }

  render() {
    return (
      <React.Fragment>
        <div ref={this.imageRef}>
          <img src={url} />
        </div>
        <CopyButton imageRef={this.imageRef}>Copy Image</CopyButton>

        <CopyButton text="Text to copy">Copy Text</CopyButton>
        <CopyButton imageURL={url}>Copy Image (New)</CopyButton>
      </React.Fragment>
    );
  }
}

Development

$ pnpm install

$ pnpm start

$ cd example

$ yarn install

$ yarn start

Browser compatibility

• execCommand here.
• Navigator.clipboard here.

License

MIT © cham11ng