React Clipboard - Flowbite

The copy to clipboard component allows you to copy text, lines of code, contact details or any other data to the clipboard with a single click on a trigger element such as a button. This component can be used to copy text from an input field, textarea, code block or even address fields in a form element.

These components are built with Tailwind CSS and Flowbite React and can be found on the internet on websites such as Bitly, Cloudflare, Amazon AWS and almost all open-source projects and documentations.

Import the component from flowbite-react to use the clipboard element:

import { Clipboard } from "flowbite-react";

Default copy to clipboard#

Use this example to copy the content of an input text field by clicking on a button and update the button text.

"use client";

import { Clipboard } from "flowbite-react"

export function Component() {
  return (
    <div className="grid w-full max-w-[23rem] grid-cols-8 gap-2">
        <label htmlFor="npm-install" className="sr-only">
            Label
        </label>
        <input id="npm-install" type="text"
            className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
            value="npm install flowbite-react"
            disabled
            readOnly
            />
         <Clipboard valueToCopy="npm install flowbite-react" label="Copy" />
    </div>
  )
}

Input with copy button#

This example can be used to copy the content of an input field by clicking on a button with an icon positioned inside the form element and also show a tooltip with a message when the text has been copied.

"use client";

import { Clipboard } from "flowbite-react"

export function Component() {
  return (
    <div className="grid w-full max-w-64">
      <div className="relative">
        <label htmlFor="npm-install" className="sr-only">
          Label
        </label>
        <input
          id="npm-install"
          type="text"
          className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
          value="npm install flowbite-react"
          disabled
          readOnly
        />
        <Clipboard.WithIcon valueToCopy="npm install flowbite-react" />
      </div>
    </div>
  )
}

Copy button with text#

Use this example to show a copy button inside the input field with a text label and icon that updates to a success state when the text has been copied.

"use client";

import { Clipboard } from "flowbite-react"

export function Component() {
  return (
    <div className="grid w-full max-w-80">
      <div className="relative">
        <label htmlFor="npm-install" className="sr-only">
          Label
        </label>
        <input
          id="npm-install"
          type="text"
          className="col-span-6 block w-full rounded-lg border border-gray-300 bg-gray-50 px-2.5 py-4 text-sm text-gray-500 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
          value="npm install flowbite-react"
          disabled
          readOnly
        />
        <Clipboard.WithIconText valueToCopy="npm install flowbite-react" />
      </div>
    </div>
  )
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "button": {
    "base": "inline-flex w-full items-center justify-center rounded-lg bg-blue-700 px-5 py-3 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
    "label": "text-center text-sm font-medium text-white sm:w-auto"
  },
  "withIcon": {
    "base": "absolute end-2 top-1/2 inline-flex -translate-y-1/2 items-center justify-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800",
    "icon": {
      "defaultIcon": "h-4 w-4",
      "successIcon": "h-4 w-4 text-blue-700 dark:text-blue-500"
    }
  },
  "withIconText": {
    "base": "absolute end-2.5 top-1/2 inline-flex -translate-y-1/2 items-center justify-center rounded-lg border border-gray-200 bg-white px-2.5 py-2 text-gray-900 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700",
    "icon": {
      "defaultIcon": "me-1.5 h-3 w-3",
      "successIcon": "me-1.5 h-3 w-3 text-blue-700 dark:text-blue-500"
    },
    "label": {
      "base": "inline-flex items-center",
      "defaultText": "text-xs font-semibold",
      "successText": "text-xs font-semibold text-blue-700 dark:text-blue-500"
    }
  }
}

References#

• Flowbite Datepicker