#CopyOnClick

#Import

import { CopyOnClick } from '@dnb/eufemia'

#Description

The CopyOnClick component provides a convenient way to copy text to the clipboard with a single click. This component is particularly useful in scenarios where users need to quickly copy text, such as when copying codes, IDs, URLs, or any other text content that needs to be easily shared or reused. Upon hovering, the component can optionally provide visual feedback to the user, displaying a copy cursor or other visual cues that indicate the component's functionality. Upon clicking, the component provides a visual feedback to the user, displaying a tooltip with a confirmation message, indicating that the text has been successfully copied.

#Example

Here’s a simple usage example of the CopyOnClick component:

import { CopyOnClick, P } from '@dnb/eufemia'
render(
  <P>
    <CopyOnClick>This is the text to copy!</CopyOnClick>
  </P>,
)

#Demo

#Default

<P>
  <CopyOnClick>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus
    pharetra elit in bibendum. Praesent nunc ipsum, convallis eget
    convallis gravida, vehicula vitae metus.
  </CopyOnClick>
</P>

#Cursor hidden

<P>
  <CopyOnClick
    showCursor={false}
  >
    Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae
    metus.
  </CopyOnClick>
</P>

#Copy content

Used when the copied value should differ from the visually shown value(children).

<P>
  <CopyOnClick copyContent="content to copy">
    content to display
  </CopyOnClick>
</P>