https://github.com/WickyNilliams/react-clipboard

Component to allow user to easily copy text to clipboard
https://github.com/WickyNilliams/react-clipboard

Last synced: 18 days ago
JSON representation

Component to allow user to easily copy text to clipboard

• Host: GitHub
• URL: https://github.com/WickyNilliams/react-clipboard
• Owner: WickyNilliams
• License: mit
• Created: 2014-09-11T18:59:26.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2017-09-20T22:22:19.000Z (about 7 years ago)
• Last Synced: 2024-05-17T01:02:19.895Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 18.6 KB
• Stars: 53
• Watchers: 6
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-clipboard

Component to allow the user to easily copy text. Based on the idea from Trello, described in this StackOverflow question: [How does Trello access the user's clipboard?](http://stackoverflow.com/questions/17527870/how-does-trello-access-the-users-clipboard)

## Install

```bash

npm install react-clipboard --save

#or...

yarn add react-clipboard

```

## Usage

See the [example](example). Or play with a working example: https://codesandbox.io/s/24wyl020wp.

### Props

```js

propTypes : {

  value : React.PropTypes.string.isRequired, // the value to be copied

  className : React.PropTypes.string, // class to apply to the 

  style : React.PropTypes.object, // styles if you'd like to override the defaults

  onCopy : React.PropTypes.func // callback for when value is copied

}

```

## Further info

This component renders a textarea, whose value is the value prop. On keydown, if the user hasn't currently selected any text on the page *and* the cmd or ctrl key is pressed, then the textarea is focussed and the text inside it is selected. When the user hits the c key, the text inside the textarea is copied.

Inline styling is used to visibly hide the textarea (this can be overriden via the `style` prop mentioned above)