@fairytek/react-clipboard v0.0.1-alpha.4

React copy to clipboard

Lightweight library copy to clipboard for the React.

Install

You can install @fairytek/react-clipboard with NPM or Yarn.

npm install @fairytek/react-clipboard

yarn add @fairytek/react-clipboard

Usage

useCopyToClipboard hook

import React from 'react';

import { useCopyToClipboard } from '@fairytek/react-clipboard';

export default function Component() {
  const [copy, isCopied, copiedText] = useCopyToClipboard();

  return (
    <>
      <h1>Click to copy:</h1>
      <div>
        <button type="button" onClick={() => copy('Hello world')}>
          {isCopied ? 'Copied' : 'Copy text'}
        </button>
      </div>
      <p>Copied value: {copiedText ?? 'Nothing is copied yet!'}</p>
    </>
  );
}

useCopyToClipboardButton hook

import React from 'react';

import { useCopyToClipboardButton } from '@fairytek/react-clipboard';

export default function Component() {
  const [buttonProps, { isCopied, copiedText }] =
    useCopyToClipboardButton('Hello');

  return (
    <>
      <h1>Click to copy:</h1>
      <div style={{ display: 'flex' }}>
        <button {...buttonProps}>{isCopied ? 'Copied' : 'Copy'}</button>
      </div>
      <p>Copied value: {copiedText ?? 'Nothing is copied yet!'}</p>
    </>
  );
}