Examples
Props
ClipboardCopy
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | Yes | The text which is copied. | |
| className | string | No | Additional classes added to the clipboard copy container. | |
| clickTip | string | No | 'Successfully copied to clipboard!' | Tooltip message to display when clicking the copy button |
| entryDelay | number | No | 100 | Delay in ms before the tooltip appears. |
| exitDelay | number | No | 1600 | Delay in ms before the tooltip disappears. |
| hoverTip | string | No | 'Copy to clipboard' | Tooltip message to display when hover the copy button |
| isCode | boolean | No | false | Flag to determine if clipboard copy content includes code |
| isExpanded | boolean | No | false | Flag to determine if clipboard copy is in the expanded state initially |
| isReadOnly | boolean | No | false | Flag to show if the input is read only. |
| maxWidth | string | No | '150px' | Maximum width of the tooltip (default 150px). |
| onChange | (text?: string | number) => void | No | (): any => undefined | A function that is triggered on changing the text. |
| onCopy | (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void | No | (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => { const clipboard = event.currentTarget.parentElement; const el = document.createElement('textarea'); el.value = text.toString(); clipboard.appendChild(el); el.select(); document.execCommand('copy'); clipboard.removeChild(el); } | A function that is triggered on clicking the copy button. |
| position | PopoverPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | No | TooltipPosition.top | Copy button popover position. |
| switchDelay | number | No | 2000 | Delay in ms before the tooltip message switch to hover tip. |
| textAriaLabel | string | No | 'Copyable input' | Aria-label to use on the TextInput. |
| toggleAriaLabel | string | No | 'Show content' | Aria-label to use on the ClipboardCopyToggle. |
| variant | typeof ClipboardCopyVariant | 'inline' | 'expansion' | No | 'inline' | Adds Clipboard Copy variant styles. |
CSS variables
View source on GitHub
