Skip to content

freeshineit/react-clipboardjs-copy

Repository files navigation

react-clipboardjs-copy

build Download Version License

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