Clipboard

Svelte Action

Allows you to quickly copy data to the clipboard.

Examples

This div is set to 'contenteditable'. Make changes then tap copy.

Getting Started

If your data is available as a primitive data type (string, integer, etc), you can provide it directly to the action.

typescript
const exampleData: string = 'Your data here.';
html
<button use:clipboard={exampleData}>Copy</button>

Copying HTML Contents

To copy the innerHTML for an element, set a data-clipboard data attribute on your target, then provide element reference to the action.

html
<!-- Source -->
<div data-clipboard="exampleElement">(contents)</div>

<!-- Trigger -->
<button use:clipboard={{ element: 'exampleElement' }}>Copy</button>

Copying Input Values

To copy a form input value, set a data-clipboard data attribute on your target, then provide input reference to the action.

html
<!-- Source -->
<input type="text" value="(contents)" data-clipboard="exampleInput"></input>

<!-- Trigger -->
<button use:clipboard={{ input: 'exampleInput' }}>Copy</button>