Ryan Chandler
9da2843a4a
Update README.md
|
há 4 anos atrás | |
|---|---|---|
| .github | há 4 anos atrás | |
| dist | há 4 anos atrás | |
| examples | há 4 anos atrás | |
| src | há 4 anos atrás | |
| tests | há 4 anos atrás | |
| .gitignore | há 4 anos atrás | |
| LICENSE.md | há 4 anos atrás | |
| README.md | há 4 anos atrás | |
| babel.config.js | há 4 anos atrás | |
| jest.config.js | há 4 anos atrás | |
| package.json | há 4 anos atrás | |
| yarn.lock | há 4 anos atrás |
README.md
✨ Help support the maintenance of this package by sponsoring me.
Alpine Clipboard
Copy text to the user's clipboard.
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:
<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-clipboard@0.2.x/dist/alpine-clipboard.umd.js"></script>
Important: This must be added before loading Alpine.js when using CDN links.
NPM
npm install @ryangjchandler/alpine-clipboard
Add the $clipboard magic property to your project by importing the package before Alpine.js.
import "@ryangjchandler/alpine-clipboard"
// import "alpinejs"
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. This means that there could be breaking changes on minor version changes, up until v1.x is reached.
For example, 0.1 -> 0.2 might introduce a breaking change.
License
Copyright (c) 2020 Ryan Chandler and contributors
Licensed under the MIT license, see LICENSE.md for details.