@ryangjchandler/alpine-clipboard
Advanced tools
Readme
✨ 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()
Note The Clipboard API that this package uses only works in a secure context (
https) andlocalhost.
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>
This package also includes an x-clipboard directive that can be added to any element (usually a button) and it will copy the result of the expression on click.
<div x-data="{ input: 'Foo!' }">
<button x-clipboard="input">
Copy to Clipboard
</button>
</div>
If you are rendering on the server, you might prefer to copy raw content instead of evaluating the expression as JavaScript. This can be done by adding the .raw modifier to the directive.
Here's a Blade snippet as an example:
<button x-clipboard.raw="{{ $post->url() }}">
Copy to Clipboard
</button>
Object and ArraySince 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"].
If you are using the npm installation method for this package or the ESM distribution, you can use the Clipboard.configure() method to attach an onCopy hook to the clipboard.
import Clipboard from '@ryangjchandler/alpine-clipboard'
Alpine.plugin(Clipboard.configure({
onCopy: () => {
console.log('Copied!')
}
}))
If you're using the $clipboard magic function, you can pass an additional argument to the function specifying the mime-type of the content. This is especially useful for copying things as HTML and being able to paste into rich text editors, email clients, etc.
<button x-on:click="$clipboard(content, 'text/html')">
Copy as HTML
</button>
This projects follow the Semantic Versioning guidelines.
Copyright (c) 2021 Ryan Chandler and contributors
Licensed under the MIT license, see LICENSE.md for details.
FAQs
Simply copy to the users clipboard in your Alpine.js components.
The npm package @ryangjchandler/alpine-clipboard receives a total of 5,230 weekly downloads. As such, @ryangjchandler/alpine-clipboard popularity was classified as popular.
We found that @ryangjchandler/alpine-clipboard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.