Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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?

Install

npm install react-clipboard --save

#or...

yarn add react-clipboard

Usage

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

Props

propTypes : {
  value : React.PropTypes.string.isRequired, // the value to be copied
  className : React.PropTypes.string, // class to apply to the <textarea />
  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)

About

Component to allow user to easily copy text to clipboard

Resources

License

Packages

No packages published