Clipboard
Allows you to quickly copy select data to the clipboard.
import { clipboard } from '@brainandbones/skeleton';
Examples
This div is set to 'contenteditable'. Make changes then tap copy below.
Usage
Basic Data
If your data is available in a basic type (string, integer, etc), you can provide it directly to the action.
const exampleData: string = 'Your data here.';
<button use:clipboard={exampleData}>Copy</button>
HTML Elements
To copy the innerHTML for an HTML element, we'll need to set a data-clipboard
target, then provide the action an object of
element: 'dataClipboardId'
<div data-clipboard="exampleElement">Content to copy.</div>
<button use:clipboard={{ element: 'exampleElement' }}>Copy</button>
Form Inputs
To copy the value of a form input, we'll need to set a data-clipboard
target, then provide the action an object of
input: 'dataClipboardId'
<input type="text" value="Content to Copy." data-clipboard="exampleInput"></input>
<button use:clipboard={{ input: 'exampleInput' }}>Copy</button>