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.

Accessibility#

CopyOnClick only works with a mouse or touch. It is not reachable with the keyboard, and screen readers do not announce that the text can be copied. So do not use it as the only way to copy.

Use CopyOnClick.Button instead, or together with CopyOnClick. It is a Button that copies the given copyContent and shows the same confirmation tooltip, which screen readers also announce.

The default title, the translation CopyOnClick.buttonTitle, only says "Copy". Give each button a title that describes what it copies, such as "Copy account number", so people using a screen reader can tell several copy buttons apart.

Relevant links#

• Source code
• Docs code

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>
)

And with a copy button:

import { CopyOnClick } from '@dnb/eufemia'
render(
  <CopyOnClick.Button
    copyContent="70321369861"
    title="Copy account number"
  />
)

Related components#

CopyOnClick is part of the Other category. Other components for similar needs:

• HeightAnimation — to animate content as it opens or closes.
• PortalRoot — to render floating content outside the normal page structure.
• ScrollView — when content needs its own horizontal or vertical scrolling area.

Demos#

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>

Copy button#

Use CopyOnClick.Button so people can also copy with the keyboard. Give it a title that describes what it copies, such as "Copy account number". You can combine it with CopyOnClick on the text.

The button copies copyContent as it is. To copy a formatted value, pass the string from a NumberFormat formatter, such as formatCurrency(1234567.89).

<Flex.Horizontal align="center" gap="x-small">
  <CopyOnClick copyContent="70321369861">7032 1369 861</CopyOnClick>
  <CopyOnClick.Button
    copyContent="70321369861"
    title="Copy account number"
  />
</Flex.Horizontal>

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>

Copy text content#

If children is a React element that cannot be directly converted to a string, the component will copy the rendered text content (textContent) instead.

<P>
  <CopyOnClick>
    <NumberFormat.Currency value={1234567.89} currency="NOK" />
  </CopyOnClick>
</P>

Custom message shown in the tooltip when content is copied#

<P>
  <CopyOnClick tooltipContent="Custom message">
    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>