✨ Help support the maintenance of this package by sponsoring me.
Copy text to the user's clipboard.
Since v2.0, this package only supports Alpine v3.x. If you're still using Alpine 2.x, please use v1.0 of this package.
This plugin adds a new $clipboard
magic property to all of your Alpine components that can be used to copy any piece of data to the user's clipboard.
Include the following <script>
tag in the <head>
of your document, just before Alpine.
<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-clipboard@2.x.x/dist/alpine-clipboard.js" defer></script>
npm install @ryangjchandler/alpine-clipboard
Add the $clipboard
magic property to your project by importing the package before Alpine.js.
import Alpine from 'alpinejs'
import Clipboard from "@ryangjchandler/alpine-clipboard"
Alpine.plugin(Clipboard)
window.Alpine = Alpine
window.Alpine.start()
To copy some data to the clipboard, invoke $clipboard
from an event handler in your component.
<div x-data="{ input: '' }">
<input x-model="input">
<button type="button" @click="$clipboard(input)">
Copy to Clipboard
</button>
</div>
Since you can pass any properties through to the $clipboard
function, if you pass through an Object
or Array
, it will be run through JSON.stringify
before being copied to the clipboard.
<div x-data="{ items: ['foo', 'bar'] }">
<button type="button" @click="$clipboard(items)">Copy to Clipboard</button>
</div>
The clipboard will now contain ["foo","bar"]
.
This projects follow the Semantic Versioning guidelines.
Copyright (c) 2021 Ryan Chandler and contributors
Licensed under the MIT license, see LICENSE.md for details.