copy button

A button to copy some text to the system clipboard, made with webcomponents.

install

npm i -S @nichoth/copy-button

use

globals

This looks at a css variable --success-color, which is used to color the checkmark that is displayed after you copy something.

index.js

Import this file. It depends on tonic and clipboard-copy, so you will need to provide them somehow, either through a bundler or importmap.

import { CopyButton } from '@nichoth/copy-button'

index.bundle.js

Import this file, including all its dependencies.

import { CopyButton } from '@nichoth/copy-button/bundle'

index.min.js

Use a minified version of this file. It includes all dependencies.

import { CopyButton } from '@nichoth/copy-button/min'

example

Include the CSS.

import { CopyButton } from '@nichoth/copy-button'
import '@nichoth/copy-button/style.css'

document.body.innerHTML = `
  <${copy-button} payload="example text">
  </${copy-button}>
`

Create a button like this