0.5.6 • Published 6 months ago

@substrate-system/copy-button v0.5.6

Weekly downloads
-
License
SEE LICENSE IN LI...
Repository
github
Last release
6 months ago

copy button

tests module types semantic versioning install size license

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

screenshot of the button, pre-click


screenshot of the button, post-click

0.5.4

6 months ago

0.5.6

6 months ago

0.5.5

6 months ago

0.3.9

10 months ago

0.3.7

10 months ago

0.5.0

7 months ago

0.4.1

10 months ago

0.4.0

10 months ago

0.5.2

7 months ago

0.5.1

7 months ago

0.4.2

10 months ago

0.3.0

12 months ago

0.3.5

12 months ago

0.3.2

12 months ago

0.3.1

12 months ago

0.3.4

12 months ago

0.3.3

12 months ago

0.1.0

1 year ago