Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryangjchandler/alpine-clipboard
Simply copy to the users clipboard in your Alpine.js components. 📋
https://github.com/ryangjchandler/alpine-clipboard
Last synced: 6 days ago
JSON representation
Simply copy to the users clipboard in your Alpine.js components. 📋
- Host: GitHub
- URL: https://github.com/ryangjchandler/alpine-clipboard
- Owner: ryangjchandler
- License: mit
- Created: 2020-08-30T12:46:40.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-09T18:58:17.000Z (3 months ago)
- Last Synced: 2024-12-27T05:04:03.995Z (13 days ago)
- Language: JavaScript
- Homepage:
- Size: 391 KB
- Stars: 354
- Watchers: 3
- Forks: 11
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
> ✨ Help support the maintenance of this package by [sponsoring me](https://github.com/sponsors/ryangjchandler).
# Alpine Clipboard
Copy text to the user's clipboard.
[](https://www.jsdelivr.com/package/npm/@ryangjchandler/alpine-clipboard)
> Since v2.0, this package only supports Alpine v3.x. If you're still using Alpine 2.x, please use [v1.0](https://github.com/ryangjchandler/alpine-clipboard/tree/v1.0.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 `` tag in the `<head>` of your document, just before Alpine.
```html
<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/[email protected]/dist/alpine-clipboard.js" defer>
```
### NPM
```bash
npm install @ryangjchandler/alpine-clipboard
```
Add the `$clipboard` magic property to your project by registering the plugin with Alpine.
```js
import Alpine from 'alpinejs'
import Clipboard from "@ryangjchandler/alpine-clipboard"
Alpine.plugin(Clipboard)
window.Alpine = Alpine
window.Alpine.start()
```
## Usage
> [!NOTE]
> The Clipboard API that this package uses only works in a secure context (`https`) and `localhost`.
To copy some data to the clipboard, invoke `$clipboard` from an event handler in your component.
```html
Copy to Clipboard
```
### Directive
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`.
```html
Copy to Clipboard
```
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:
```blade
Copy to Clipboard
```
### `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.
```html
Copy to Clipboard
```
The clipboard will now contain `["foo","bar"]`.
### Hooks
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.
```js
import Clipboard from '@ryangjchandler/alpine-clipboard'
Alpine.plugin(Clipboard.configure({
onCopy: () => {
console.log('Copied!')
}
}))
```
## Specifying the mime type of the content
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.
```html
Copy as HTML
```
## Versioning
This projects follow the [Semantic Versioning](https://semver.org/) guidelines.
## License
Copyright (c) 2021 Ryan Chandler and contributors
Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.