Skip to content
Home

CopyOnClick

Info
Demos
Properties

Demo

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.

Code Editor
<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.

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

Code Editor
<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.

Code Editor
<P>
  <CopyOnClick>
    <NumberFormat 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.

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