Skip to content
Destyler UI Destyler UI Destyler UI
Docs
Clipboard

Clipboard

The clipboard machine allows users to quickly copy content to clipboard.

Install

Install the component from your command line.

Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/clipboard @destyler/vue
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/clipboard @destyler/react
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/clipboard @destyler/svelte
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/clipboard @destyler/solid

Anatomy

Import all parts and piece them together.

<script setup lang="ts">
import * as clipboard from '@destyler/clipboard'
import { normalizeProps, useMachine } from '@destyler/vue'
import { computed, useId } from 'vue'


const [state, send] = useMachine(
  clipboard.machine({
    id: useId(),
    value: 'https://github.com/destyler/destyler',
  })
)


const api = computed(() =>
  clipboard.connect(state.value, send, normalizeProps),
)
</script>


<template>
  <div v-bind="api.getRootProps()">
    <label v-bind="api.getLabelProps()"></label>
    <div v-bind="api.getControlProps()" >
      <input v-bind="api.getInputProps()">
      <button v-bind="api.getTriggerProps()"></button>
    </div>
  </div>
</template>
import * as clipboard from '@destyler/clipboard'
import { normalizeProps, useMachine } from '@destyler/react'
import { useId } from 'react'


export default function Clipboard() {


  const [state, send] = useMachine(
    clipboard.machine({
      id: useId(),
      value: 'https://github.com/destyler/destyler',
    })
  )


  const api = clipboard.connect(state, send, normalizeProps)


  return (
    <>
      <div {...api.getRootProps()}>
        <label {...api.getLabelProps()}></label>
        <div {...api.getControlProps()}>
          <input {...api.getInputProps()} />
          <button {...api.getTriggerProps()}></button>
        </div>
      </div>
    </>
  )
}
<script lang="ts">
  import * as clipboard from '@destyler/clipboard'
  import { normalizeProps, useMachine } from '@destyler/svelte'


  const id = $props.id()


  const [state, send] = useMachine(
    clipboard.machine({
      id: id,
      value: 'https://github.com/destyler/destyler',
    })
  )


  const api = $derived(clipboard.connect(state, send, normalizeProps))
</script>


<div {...api.getRootProps()} >
  <label {...api.getLabelProps()}></label>
  <div {...api.getControlProps()}>
    <input {...api.getInputProps()}/>
    <button {...api.getTriggerProps()}></button>
  </div>
</div>
import * as clipboard from '@destyler/clipboard'
import { normalizeProps, useMachine } from '@destyler/solid'
import { createMemo, createUniqueId } from 'solid-js'


export default function Clipboard() {


  const [state, send] = useMachine(
    clipboard.machine({
      id: createUniqueId(),
      value: 'https://github.com/destyler/destyler',
    })
  )


  const api = createMemo(() => clipboard.connect(state, send, normalizeProps))


  return (
    <>
      <div {...api().getRootProps()}>
        <label {...api().getLabelProps()}></label>
        <div {...api().getControlProps()}>
          <input {...api().getInputProps()}/>
          <button {...api().getTriggerProps()}></button>
        </div>
      </div>
    </>
  )
}

Setting the value to copy

You can set the value to copy by passing a value prop to the machine context.

const [state, send] = useMachine(
  clipboard.machine({
    value: "Hello, world!",
  }),
)

Listening to copy events

When the value is copied to the clipboard, the onStatusChange event is fired. You can listen to this event and perform any action you want.

const [state, send] = useMachine(
  clipboard.machine({
    onStatusChange: (details) => {
      console.log("Copy status changed to", details.copied)
    },
  }),
)

Checking if the value is copied

Use the api.copied property to check if the value is copied to the clipboard.

const api = clipboard.connect(state, send)


if (api.copied) {
  console.log("Value is copied to the clipboard")
}

Changing the timeout

By default, the clipboard machine will automatically reset the state to idle after 3000ms. You can change this timeout by passing a timeout option to the machine context.

const [state, send] = useMachine(
  clipboard.machine({
    timeout: 5000,
  }),
)

Styling Guide

Earlier, we mentioned that each collapse part has a data-part attribute added to them to select and style them in the DOM.

[data-scope="clipboard"][data-part="root"] {
  /* styles for the root part */
}

Methods and Properties

Machine Context

The clipboard machine exposes the following context properties:

ids
Partial<{ root: string; input: string; label: string; }>
The ids of the elements in the clipboard. Useful for composition.
value
string
The value to be copied to the clipboard
onStatusChange
(details: CopyStatusDetails) => void
The function to be called when the value is copied to the clipboard
timeout(default: 3000)
number
The timeout for the copy operation
id
string
The unique identifier of the machine.
getRootNode
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

Machine API

The clipboard api exposes the following methods:

copied
boolean
Whether the value has been copied to the clipboard
value
string
The value to be copied to the clipboard
setValue
(value: string) => void
Set the value to be copied to the clipboard
copy
() => void
Copy the value to the clipboard

Data Attributes

Root

attribute
description
data-scope
clipboard
data-part
root
data-copied
Present when copied state is true

Label

attribute
description
data-scope
clipboard
data-part
label
data-copied
Present when copied state is true

Control

attribute
description
data-scope
clipboard
data-part
control
data-copied
Present when copied state is true

Input

attribute
description
data-scope
clipboard
data-part
input
data-copied
Present when copied state is true
data-readonly
Present when read-only

Trigger

attribute
description
data-scope
clipboard
data-part
trigger
data-copied
Present when copied state is true

Collapsible

Color Picker