react-clipboardjs-copy

A react copy component that based on clipboard.js

中文

Installing

npm install --save react-clipboardjs-copy

Basic usage

import React from 'react';
import ReactClipboard from 'react-clipboardjs-copy';
import './App.css';
export default class App extends React.Component {
  render() {
    return (
      <div className="App">
        <section className="app-item">
          <div className="app-item-desc">Copy text</div>
          <ReactClipboard text="copy text" onSuccess={() => {}} onError={() => {}}>
            <button
              onClick={() => {
                console.log('click button');
              }}
            >
              Copy Text
            </button>
          </ReactClipboard>
        </section>
        <section className="app-item">
          <div className="app-item-desc">
            <textarea id="textarea">Mussum ipsum cacilds...</textarea>
            <div />
          </div>
          <ReactClipboard action="cut" target="#textarea" onSuccess={() => {}} onError={() => {}}>
            <button>Cut</button>
          </ReactClipboard>
        </section>
      </div>
    );
  }
}

<input id="input" value="[email protected]:freeshineit/react-clipboardjs-copy.git" />
<ReactClipboard
  target="#input"
  onSuccess={handleSuccess}
  onError={handleError}
>
  <button>
    Copy Input value
  </button>
</ReactClipboard>

Options(props)

| Property | Description | Type | Default | | --- | --- | --- | --- | | action | Overwrites default command (cut or copy) , Corresponding to clipboard.js attribute data-clipboard-action. | cut | copy | copy | | target | React component will copy target element content. Corresponding to clipboard.js attribute data-clipboard-target. | string | function(elem: Element): Element | - | | text | React component will copy content. Corresponding to clipboard.js attribute data-clipboard-text | string | function(elem: Element): string | | | container | For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the container value. | Element | body | | selection | Setting whether to clear the copy or cut selected | boolean | false | | onSuccess | Operation success callback | function(event?: ClipboardJS.Event): void | - | | onError | Operation error callback | function(event?: ClipboardJS.Event): void | - |

Developing

git clone [email protected]:freeshineit/react-clipboardjs-copy.git

cd react-clipboardjs-copy

pnpm install

## development
pnpm run dev

## test
pnpm run test

## production
pnpm run build

Reference material

clipboard.js

License

MIT © Shine Shao