CopyOnClick

Demos

Default

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

<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

Praesent nunc ipsum, convallis eget convallis gravida, vehicula vitae metus.

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

content to display

<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

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

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

#CopyOnClick

#Demos

#Default

#Cursor hidden

#Copy content

#Copy text content

#Custom message shown in the tooltip when content is copied