https://github.com/nkbt/react-copy-to-clipboard

Copy-to-clipboard React component
https://github.com/nkbt/react-copy-to-clipboard

Last synced: 6 days ago
JSON representation

Copy-to-clipboard React component

• Host: GitHub
• URL: https://github.com/nkbt/react-copy-to-clipboard
• Owner: nkbt
• License: mit
• Created: 2015-07-04T09:10:02.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-03-31T13:21:16.000Z (almost 2 years ago)
• Last Synced: 2024-04-15T03:15:28.245Z (9 months ago)
• Language: JavaScript
• Size: 101 MB
• Stars: 2,298
• Watchers: 19
• Forks: 120
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-star-libs - nkbt / react-copy-to-clipboard
• awesome-web-cn - react-copy-to-clipboard - 一个一键复制内容到剪切板的组件 (Uncategorized / Uncategorized)

README

        
# react-copy-to-clipboard [![npm](https://img.shields.io/npm/v/react-copy-to-clipboard.svg?style=flat-square)](https://www.npmjs.com/package/react-copy-to-clipboard)

[![Gitter](https://img.shields.io/gitter/room/nkbt/help.svg?style=flat-square)](https://gitter.im/nkbt/help)

[![CircleCI](https://img.shields.io/circleci/project/nkbt/react-copy-to-clipboard.svg?style=flat-square&label=nix-build)](https://circleci.com/gh/nkbt/react-copy-to-clipboard)

[![Dependencies](https://img.shields.io/david/nkbt/react-copy-to-clipboard.svg?style=flat-square)](https://david-dm.org/nkbt/react-copy-to-clipboard)

[![Dev Dependencies](https://img.shields.io/david/dev/nkbt/react-copy-to-clipboard.svg?style=flat-square)](https://david-dm.org/nkbt/react-copy-to-clipboard#info=devDependencies)

Copy to clipboard React component

Based on [copy-to-clipboard](https://npm.im/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](example/copy-to-clipboard.gif)

## Installation

### NPM

```sh

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

```

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

### 1998 Script Tag:

```html

(Module exposed as `CopyToClipboard`)

```

## Live design system demo

[https://www.jinno.io/app/18/](https://www.jinno.io/app/18/?source=react-copy-to-clipboard)

## Simple web demo

[http://nkbt.github.io/react-copy-to-clipboard](http://nkbt.github.io/react-copy-to-clipboard)

## Codepen demo

[http://codepen.io/nkbt/pen/eNPoQv](http://codepen.io/nkbt/pen/eNPoQv?editors=0010)

## Usage

```js

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 (

      


         this.setState({value, copied: false})} />


         this.setState({copied: true})}>

          Copy to clipboard with span

        

         this.setState({copied: true})}>

          Copy to clipboard with button

        

        {this.state.copied ? Copied. : null}

      

    );

  }

}


const appRoot = document.createElement('div');

document.body.appendChild(appRoot);

ReactDOM.render(, 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](https://npm.im/copy-to-clipboard) options.

See [API docs](https://npm.im/copy-to-clipboard#api) 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.

```js

  Copy to clipboard

```

## 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`

```bash

git clone [email protected]:nkbt/react-copy-to-clipboard.git

cd react-copy-to-clipboard

yarn install

yarn start

# then

open http://localhost:8080

```

## Tests

```bash

# 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