Clipboard
Svelte ActionAllows you to quickly copy data to the clipboard.
Import
Package
Source
Doc
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.
const exampleData: string = 'Your data here.';
<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.
<!-- 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.
<!-- Source -->
<input type="text" value="(contents)" data-clipboard="exampleInput"></input>
<!-- Trigger -->
<button use:clipboard={{ input: 'exampleInput' }}>Copy</button>