-
Notifications
You must be signed in to change notification settings - Fork 26
/
Copy pathindex.html
99 lines (94 loc) · 4.11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<title>react-zeroclipboard</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
</head>
<body>
<div role="main" class="container">
<div class="row">
<div class="col-12">
<h2 class="brand">react-zeroclipboard</h2>
<div id="app">
<form class="">
<div class="form-group" id="npm-install-link-target"></div>
</form>
<p>This is a wrapper around ZeroClipboard for use with React. ZeroClipboard has a difficult to work with api
which is being abstracted from you. This library...</p>
<ul>
<li>asynchronusly loads zeroclipboard from cdnjs</li>
<li>handles mounting/unmounting of components</li>
<li>figures out which element was clicked</li>
<li>allows you to declare text/html/rtf, or pass a function which returns it dynamically</li>
</ul>
<p>Here's a simple example:</p>
<pre><code>render: function(){
return (
<div>
<p>Click the button to copy some text</p>
<ReactZeroClipboard text="Hello, world!"><button>Copy</button></ReactZeroClipboard>
</div>
)
}
</code></pre>
<p>The full api offers more flexibility. If you provide e.g. html and text, they'll both be set and
the application you're pasting into decides which one to use. Methods have higher priority than
the literal strings, if for some reason you pass both.</p>
<p>The events can be used to show a success message by changing state, focusing an input, or
anything you want to happen. Generally you should use <code>onAfterCopy</code>. The docs don't specify
when the error event occurs, or what can cause it.</p>
<pre><code> <ReactZeroClipboard
text="text to copy"
html="<b>html to copy</b>"
richText="{\\rtf1\\ansi\n{\\b rich text to copy}}"
// optional
swfPath="http://user_defined_cdn_path/ZeroClipboard.swf"
getText={(Void -> String)}
getHtml={(Void -> String)}
getRichText={(Void -> String)}
onCopy={(Event -> Void)}
onAfterCopy={(Event -> Void)}
onErrorCopy={(Error -> Void)}
onReady={(Error -> Void)}
/>
</code></pre>
<p>Here's an example where we copy the current url to the clipboard, both in plain text and a html anchor</p>
<p>If the user pastes this in their address bar they get the url, and if they paste it in gmail they get a nice link.</p>
<pre><code>render: function(){
return (
<div>
<p>Copy a link to this page</p>
<ReactZeroClipboard
getText={function(){ return location.href; }}
getHtml={function(){ return '<a href="' + location.href + '">My Page</a>'; }}>
<button>Copy</button>
</ReactZeroClipboard>
</div>
)
}
</code></pre>
<p>Here's a demo which shows how multiple types work. Press the copy button, and then try pasting it into each of the boxes below.
one is a textarea, and the other is a contentEditable.</p>
<style>
#list-demo-target textarea, #list-demo-target [contenteditable] {
width: 100%;
height: 7em;
border: 1px solid black;
box-sizing: border-box;
padding: 1em;
outline: none;
}
#list-demo-target li.even {
background: rgba(0, 0, 0, 0.1);
}
</style>
<div id="list-demo-target"></div>
</div>
<p>This is simply a button which logs the events as they occur.</p>
<div id="events-demo-target"></div>
</div>
</div>
</div>
<script src="docs-bundle.js"></script>
</body>
</html>