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>

Edit on GitHub