Copy to clipboard

A simple component to copy any text to the browser clipboard.

<x-ui::copy-to-clipboard text="Hello baby">
    <x-ui::secondary-button>Copy me</x-ui::secondary-button>
</x-ui::copy-to-clipboard>

Use case

The component is useful when you want the save the user the hassle of selecting and copying text. It can be used in many scenarios, like sharing a link, a code snippet, or any other text that you want to make it easier for the user to copy.

<div class="flex items-center pl-2 gap-2 border max-w-sm rounded">
    <span>Token:</span>
    <span class="truncate text-gray-500">sk_test_4eC39HqLyjWDarjtT1zdp7dc3_secret_1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
    <x-ui::copy-to-clipboard text="sk_test_4eC39HqLyjWDarjtT1zdp7dc3_secret_1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ">
        <x-ui::tertiary-button icon="copy" class="border-l rounded-l-none"></x-ui::tertiary-button>
    </x-ui::copy-to-clipboard>
</div>

Limitations

The component itself needs to be handled with caution, since the browser only allows copying to the clipboard on secured contexts (https). If you try to copy the text on an insecure context (http), the browser will throw an error on the console.

This might be annoying for development purposes, but if you are using Herd you can easily create a secure tunnel to your local environment, allowing you to test this feature. Read more about it on the Herd documentation .