@substrate-system/copy-button NPM

copy button

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

install

npm i -S @substrate-system/copy-button

!IMPORTANT
Be sure to import @substrate-system/a11y too.

demonstration

See substrate-system.github.io/copy-button for an example.

globals

This depends on @substrate-system/a11y for a .visually-hidden class. Install and import that module as well.

CSS variables --success-color and --copy-color determine the color of the success checkmark and copy icon.

use

Include this package, then call customElements.define with your preferred tag name. Be sure to import @substrate-system/a11y too; we use class names exposed there for accessibility.

import { CopyButton } from '@substrate-system/copy-button'
import '@substrate-system/a11y'
import '@substrate-system/copy-button/css'

customElements.define('copy-button', CopyButton)

Or call the exported function register to use the default tag name, copy-button.

import { register } from '@substrate-system/copy-button'

register()

// the web component can be used now

Example without a build step

Copy the files

Copy files so they are accessible by your web server.

JS

cp ./node_modules/@substrate-system/copy-button/dist/index.min.js public/copy-button.js

CSS

cp ./node_modules/@substrate-system/copy-button/dist/style.min.css public/copy-button.css

Use in HTML

<head>
    <!-- style -->
    <link rel="stylesheet" href="./copy-button.css">
</head>

<body>
    <!-- use the tag -->
    <copy-button payload="example text"></copy-button>

    <!-- include the script -->
    <script type="module">
        import { CopyButton } from '/copy-button.js'
        customElements.define('copy-button', CopyButton)
    </script>
</body>

With a build step

We expose several import options

// default, unminified
import '@substrate-system/copy-button'

// minified
import '@substrate-system/copy-button/min'

// style
import '@substrate-system/copy-button/css'

// style, minifed
import '@substrate-system/copy-button/css/min'

In vite, for example, import like this

import '@substrate-system/copy-button'
import '@substrate-system/copy-button/css'
// or minified css
import '@substrate-system//copy-button/css/min'

`/copy`

Import just the copy function, no UI.

import { clipboardCopy } from '@substrate-system/copy-button/copy'

clipboardCopy('hello copies')

CSS

Override the variables --success-color and --copy-color to customize the color.

.copy-button {
    --success-color: green;
    --copy-color: blue;
}

attributes

1 required attribute, 1 optional attribute.

`payload`

The text you want to copy.

<copy-button payload="example"></copy-button>

`duration`

Length of time in milliseconds that the success checkmark should show. Default is 2000 (2 seconds).

<copy-button duration="4000" payload="example"></copy-button>

Screenshots

Create a button like this

copy button html web component

@substrate-system/a11y @substrate-system/util

6 months ago

6 months ago

6 months ago

10 months ago

10 months ago

7 months ago

10 months ago

10 months ago

7 months ago

7 months ago

10 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago