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