5.1.0 • Published 3 years ago

react-copy-to-clipboard v5.1.0

Weekly downloads
621,803
License
MIT
Repository
github
Last release
3 years ago

react-copy-to-clipboard npm

Gitter

CircleCI Dependencies Dev Dependencies

Copy to clipboard React component

Based on copy-to-clipboard

Would try to use execCommand with fallback to IE specific clipboardData interface and finally, fallback to simple prompt with proper text content & 'Copy to clipboard: Ctrl+C, Enter'

Copy to clipboard

Installation

NPM

npm install --save react-copy-to-clipboard

Don't forget to manually install peer dependencies (react) if you use npm@3.

1998 Script Tag:

<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-copy-to-clipboard/build/react-copy-to-clipboard.js"></script>
(Module exposed as `CopyToClipboard`)

Live design system demo

https://www.jinno.io/app/18/

Simple web demo

http://nkbt.github.io/react-copy-to-clipboard

Codepen demo

http://codepen.io/nkbt/pen/eNPoQv

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';

class App extends React.Component {
  state = {
    value: '',
    copied: false,
  };

  render() {
    return (
      <div>
        <input value={this.state.value}
          onChange={({target: {value}}) => this.setState({value, copied: false})} />

        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <span>Copy to clipboard with span</span>
        </CopyToClipboard>

        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <button>Copy to clipboard with button</button>
        </CopyToClipboard>

        {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
      </div>
    );
  }
}

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

Options

text: PropTypes.string.isRequired

Text to be copied to clipboard

onCopy: PropTypes.func

Optional callback, will be called when text is copied

onCopy(text, result)

result (bool): Returns true if copied successfully, else false.

options: PropTypes.shape({debug: bool, message: string})

Optional copy-to-clipboard options.

See API docs for details

children: PropTypes.node.isRequired

CopyToClipboard is a simple wrapping component, it does not render any tags, so it requires the only child element to be present, which will be used to capture clicks.

<CopyToClipboard text="Hello!">
  <button>Copy to clipboard</button>
</CopyToClipboard>

Development and testing

Currently is being developed and tested with the latest stable Node 8 on OSX.

To run example covering all CopyToClipboard features, use yarn start, which will compile example/Example.js

git clone git@github.com:nkbt/react-copy-to-clipboard.git
cd react-copy-to-clipboard
yarn install
yarn start

# then
open http://localhost:8080

Tests

# to run ESLint check
yarn lint

# to run tests
yarn test

# to run end-to-end tests
# first, run `selenium/standalone-firefox:3.4.0` docker image
docker run -p 4444:4444 selenium/standalone-firefox:3.4.0
# then run test
yarn e2e

License

MIT

@h1-card/h1-lib-frontend@szsk/component@shareid-ai/desktop@shareid-ai/sdk-mobile-desktop@dterekhova/components@fairfx/fuji@iart/strapi-plugin-upload@borderfreefinancial/revo-consumer@borderfreefinancial/revo-core@borderfreefinancial/revo-core-api@borderfreefinancial/revo-web-video-test@development-framework/yaml-viewd5-layoutdashboardcomponentsperfiosinternal-dash-explorezfzn-ui@lethe0305/doc-leteh-repo@lethe0305/doc-reporeact-mindee@travelshift/webstrapi-plugin-upload-filepond@fsl0110/rui.ae-explorercaoliao-plugin-documentationcaoliao-plugin-uploadglobalization-idmp-nodejs-application@productfy/commondt-ai-worksdesign-frameworksitka-web@pronto-development/pronto-componentsfondfolioautoml-templateoxygenideumi-antdgraphql-playground-react-authant-design-pro-scaffoldant-design-pro-cs@dynamicyield/react-lib-fork@mindee/react-web-essentials@mimiza/sdknd-ably-console@vm-lib/react-lib-test1lumiastreammirador-biblissimaform-builder-migrationbugreplay-videoplayer@ltaoo/bisheng-theme-antder-prism-webspfxspfx-test@rem-js/rem-ant-design-pro@yuanhong/artipubbitcasino-v3@dxos/messenger-app@dxos/game-app@dxos/chess-appsimple-widgetelon-npmlink-testbbgamemarykirk-common-componentscommon-xuslash-common-componentstdp-uipromesite-tracking-tagsstrapi-new-adminmdt-designmdt-lib@hzerojs/layoutlcar-cdeooxx_uidemoumo-schema-editorsimple-antd-management-fast-frameworkzcx-uiff-component-library-reactchinese-miradorconsole-core-portal-uicmt-navigator@adapttive/strapi-admin@elijahjpassmore/qwc2medipass-overlordnotta-web-iconreact-notticon@djaciel/react-components@castletech/pwa-module-mercadopago@castletech/pwa-theme-running-landtealess-helperswink_commonsdeveloper-tools-antd-v4develop-test-toolsdeveloptools-testcybex-game-addonninno-clientpriceit@axiomhq/axiom-elementsprogram_leader_portal_pysk-interface-testzero-react@cloudhub-ux/core@ncsa/incore
5.1.0

3 years ago

5.0.4

3 years ago

5.0.3

4 years ago

5.0.2

5 years ago

5.0.1

7 years ago

5.0.0

8 years ago

4.3.1

8 years ago

4.3.0

8 years ago

4.2.3

8 years ago

4.2.2

8 years ago

4.2.1

8 years ago

4.2.0

8 years ago

4.1.1

8 years ago

4.1.0

9 years ago

4.0.2

9 years ago

4.0.1

9 years ago

4.0.0

9 years ago

3.0.4

9 years ago

3.0.3

9 years ago

3.0.2

9 years ago

3.0.1

9 years ago

3.0.0

9 years ago

2.0.1

9 years ago

2.0.0

9 years ago

1.0.4

9 years ago

1.0.3

9 years ago

1.0.2

9 years ago

1.0.1

9 years ago

1.0.0

9 years ago