Fără Descriere

Ryan Chandler c9d0e7d7af chore: remove existing tests 4 ani în urmă
.github 9dadd11a40 chore: workflows for npm 4 ani în urmă
builds c4a11a533b feature: v3 support!!! 4 ani în urmă
dist 5aeedf6d8b chore: update examples 4 ani în urmă
examples 5aeedf6d8b chore: update examples 4 ani în urmă
src e5d1a48e45 fix: add object/array support 4 ani în urmă
.gitignore fa5989466c init 4 ani în urmă
LICENSE.md fa5989466c init 4 ani în urmă
README.md c6a15f1400 remove: semantic versioning info 4 ani în urmă
jest.config.js fa5989466c init 4 ani în urmă
package-lock.json c4a11a533b feature: v3 support!!! 4 ani în urmă
package.json c4a11a533b feature: v3 support!!! 4 ani în urmă
rollup.config.js c4a11a533b feature: v3 support!!! 4 ani în urmă

README.md

✨ Help support the maintenance of this package by sponsoring me.

Alpine Clipboard

Copy text to the user's clipboard.

GitHub tag (latest by date) Build size Brotli Monthly downloads via CDN

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.

About

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.

Installation

CDN

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

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()

Usage

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>

Object and Array

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"].

Versioning

This projects follow the Semantic Versioning guidelines.

License

Copyright (c) 2021 Ryan Chandler and contributors

Licensed under the MIT license, see LICENSE.md for details.