@svelte-bin/clipboard

Svelte action & utilities for copying text and image to clipboard

Installation

npm i @svelte-bin/clipboard

Usage

Text Passed

<script>
	import { clipboard } from '@svelte-bin/clipboard';
	let textToCopy = 'Hello World';

	let copied = false;
	const onCopy = () => {
		copied = true;
		setTimeout(() => {
			copied = false;
		}, 1000);
	};
</script>

<button type="button" use:clipboard={textToCopy} on:copied={onCopy}
	>{copied ? 'copied' : 'click me'}</button
>

Image Passed (Blob)

https://web.dev/articles/async-clipboard#writetext

<script>
    import {clipboard} from '@svelte-bin/clipboard'
    let imageToCopy = () => {
        const imgURL = '/images/generic/file.png';
        const data = await fetch(imgURL);
        const blob = await data.blob();

        return blob
    }

    let copied = false
    const onCopy = () => {
        copied = true
        setTimeout(() => {
            copied = false
        }, 1000)
    }
</script>

<button type="button" use:clipboard={imageToCopy} on:copied={onCopy}
	>{copied ? 'copied' : 'click me'}</button
>

Image Passed (URL)

https://web.dev/articles/async-clipboard#writetext

<script>
	import { clipboard } from '@svelte-bin/clipboard';

	let copied = false;
	const onCopy = () => {
		copied = true;
		setTimeout(() => {
			copied = false;
		}, 1000);
	};
</script>

<button
	type="button"
	use:clipboard={{
		imageURL: '/images/generic/file.png'
	}}
	on:copied={onCopy}>{copied ? 'copied' : 'click me'}</button
>

text+Image Passed (URL)

https://web.dev/articles/async-clipboard#writetext

<script>
	import { clipboard } from '@svelte-bin/clipboard';

	let copied = false;
	const onCopy = () => {
		copied = true;
		setTimeout(() => {
			copied = false;
		}, 1000);
	};
</script>

<button
	type="button"
	use:clipboard={{
		imageURL: '/images/generic/file.png',
		text: 'Hello World'
	}}
	on:copied={onCopy}>{copied ? 'copied' : 'click me'}</button
>

Params

Param	Description
string|Blob|object	There are 3 types parameter that can be used

Param	Description
string	The text (or function that returns text) that will be copied when the action is triggered

Param	Description
blob	The image blob (or function that returns image blob) that will be copied when the action is triggered

Param (Object)	Description
text	The text that will be copied when the action is triggered
imageURL	The image url that will be copied when the action is triggered

Events

The clipboard action dispatches custom events. Each custom event takes a callback function just like other events.

'on:copying': (event: CustomEvent) => void;
'on:copied': (event: CustomEvent<string | ClipboardItem>) => void;
'on:clipboard-error': (event: CustomEvent<any>) => void;

// just for check clipboard status
'on:clipboard-granted': (event: CustomEvent) => void;
'on:clipboard-danied': (event: CustomEvent) => void;
'on:clipboard-prompt': (event: CustomEvent) => void;

Definition

interface ParameterObject {
	imageURL?: string;
	text?: string;
}

type AtLeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U];

type ParameterValue = string | ClipboardItem;

export type Parameter =
	| ParameterValue
	| Promise<ParameterValue>
	| (() => ParameterValue | Promise<ParameterValue>)
	| AtLeastOne<ParameterObject>;

interface Attributes {
	'on:copying': (event: CustomEvent) => void;
	'on:copied': (event: CustomEvent<string | ClipboardItem>) => void;
	'on:clipboard-error': (event: CustomEvent<any>) => void;

	// just for check clipboard status
	'on:clipboard-granted': (event: CustomEvent) => void;
	'on:clipboard-danied': (event: CustomEvent) => void;
	'on:clipboard-prompt': (event: CustomEvent) => void;
}

export type clipboardAction = Action<HTMLElement, Parameter, Attributes>;