Copies element values to the clipboard. Easily configured using HTML5 attributes and/or JavaScript API. Take it for a spin in our playground!
For a complete guide and working demo refer to the doumentation
Use clipboard on an element to copy its own value, or clipboard-query to
select the source. Either attribute initializes a click listener, including on
dynamically added elements.
<button clipboard>Copy this text</button>
<button clipboard-query="#message">Copy message</button>
<textarea id="message">Hello</textarea>The trigger's clipboard attribute reflects copying, copied, or error.
These are output states: changing the value does not initiate a copy. Each click
copies again, including when the attribute already contains a state. The state
remains until the next copy; no timer or CSS is required.
[clipboard] .copy-success { display: none; }
[clipboard="copied"] .copy-success { display: inline; }
[clipboard="copied"] .copy-icon { display: none; }Successful copies emit the existing clipboarded event with detail.clipboardItems.
Failures emit clipboard-error with detail.error. Both events bubble, and state
is updated before the event fires. Elements with actions defer to the Actions
chain; use actions="clipboard" with either clipboard attribute. Disabled controls
and controls with aria-disabled="true" do not copy on click.
<script src="https://cdn.CoCreateJS.com/clipboard/latest/CoCreate-clipboard.min.js"></script><script src="https://cdn.CoCreateJS.com/clipboard/latest/CoCreate-clipboard.min.css"></script>$ npm i @cocreate/clipboard$ yarn install @cocreate/clipboardAll updates to this library are documented in our CHANGELOG and releases. You may also subscribe to email for releases and breaking changes.
If you are interested in the future direction of this project, please take a look at our open issues and pull requests. We would love to hear your feedback.
CoCreate-clipboard is guided and supported by the CoCreate Developer Experience Team.
Please Email the Developer Experience Team here in case of any queries.
CoCreate-clipboard is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
We encourage contribution to our libraries (you might even score some nifty swag), please see our CONTRIBUTING guide for details.
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create issues and pull requests or merely upvote or comment on existing issues or pull requests.
We appreciate your continued support, thank you!