├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── example
└── App.js
├── package.json
└── src
└── index.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env", "react"],
3 | "plugins": ["transform-class-properties"]
4 | }
5 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | npm-debug.log
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Nick Williams
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-clipboard
2 |
3 | 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)
4 |
5 | ## Install
6 |
7 | ```bash
8 | npm install react-clipboard --save
9 |
10 | #or...
11 |
12 | yarn add react-clipboard
13 | ```
14 |
15 | ## Usage
16 |
17 | See the [example](example). Or play with a working example: https://codesandbox.io/s/24wyl020wp.
18 |
19 | ### Props
20 |
21 | ```js
22 | propTypes : {
23 | value : React.PropTypes.string.isRequired, // the value to be copied
24 | className : React.PropTypes.string, // class to apply to the
25 | style : React.PropTypes.object, // styles if you'd like to override the defaults
26 | onCopy : React.PropTypes.func // callback for when value is copied
27 | }
28 | ```
29 |
30 | ## Further info
31 |
32 | 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.
33 |
34 | Inline styling is used to visibly hide the textarea (this can be overriden via the `style` prop mentioned above)
--------------------------------------------------------------------------------
/example/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import Clipboard from "react-clipboard";
4 |
5 | class Mouse extends React.Component {
6 | handleMove = ({ clientX, clientY }) => {
7 | this.props.onMove({ x: clientX, y: clientY });
8 | };
9 |
10 | componentDidMount() {
11 | document.addEventListener("mousemove", this.handleMove);
12 | }
13 |
14 | componentWillUnmount() {
15 | document.removeEventListener("mousemove", this.handleMove);
16 | }
17 |
18 | render() {
19 | return null;
20 | }
21 | }
22 |
23 | class App extends React.Component {
24 | state = {
25 | pos: {
26 | x: 0,
27 | y: 0
28 | },
29 | copied: false
30 | };
31 |
32 | handleCopy = () => {
33 | clearTimeout(this.timer);
34 | this.setState({ copied: true });
35 | this.timer = setTimeout(() => this.setState({ copied: false }), 1000);
36 | };
37 |
38 | handleMove = pos => {
39 | this.setState({ pos });
40 | };
41 |
42 | render() {
43 | const { pos, copied } = this.state;
44 | const value = JSON.stringify(pos, null, " ");
45 |
46 | return (
47 |