React Copy To Clipboard UI
A react component to display text with copy to clipboard option
Installation
Use npm to install
npm i -S react-copy-to-clipboard-uiUsage
import ReactCopyToClipboardUI from 'react-copy-to-clipboard-ui'; function MyComponent = () => ( <ReactCopyToClipboardUI>This is my text</ReactCopyToClipboardUI>); Props
| Props | Type | Default Value | Description |
|---|---|---|---|
| children | React component or string | this is copyable text |
The text to display |
| copyText | string | null |
The text that should be copied to clipboard when action button is clicked. Note: if null, then the value of the children prop will be copied. |
| btnLabel | string | copy |
The action button label to show when the mouse hovers over the component |
| onCopyBtnLabel | string | copied |
The action button label to show after copy action takes place. This label will stay for onCopyBtnLabelDuration value |
| containerStyle | object | Style of the container | |
| aciveContainerStyle | object | Style of the container when the mouse hovers over the component | |
| textStyle | object | Style of the displayed text | |
| activeTextStyle | object | style of the displayed text when the mouse hovers over the component | |
| btnStyle | object | style of the action button | |
| onCopy | func | null | callback function when action button is clicked. Receives the copied text as the parameter |
| onMouseEnter | func | null | callback function when the mouse enters the component |
| onMouseLeave | func | null | callback function when the mouse leaves the component |