@svelte-bin/clipboard

Svelte action & utilities for copying text and image to clipboard

Installation

npm i @svelte-bin/clipboard

Usage

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

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
>

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
>

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>;