@paprika/copy-input
Description
The CopyInput component is an input with a button that copies the input's contents to user's clipboard.
Installation
yarn add @paprika/copy-input
or with npm:
npm install @paprika/copy-input
Props
CopyInput
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| alterCopiedText | func | false | null | Called after the button is clicked, and the copied value is passed in |
| children | node | false | null | Used for CopyInput.Input |
| clickedText | string | false | null | The text to show in the tooltip when the user presses the "copy" button |
| hoverText | string | false | null | The text to show in the tooltip when the user hovers over the "copy" button |
| isReadOnly | bool | false | true | Is the input read-only. |
| hasInputContainer | bool | false | true | If the value will be rendered in an Input component or hidden |
| hasValueContainer | bool | false | false | If a plain text version of the value will be rendered |
| value | string | false | "" | Default value for the input |
Usage
Uncontrolled:
import CopyInput from "@paprika/copy-input";
return <CopyInput value="Copy me" />;Controlled with props for the internal Input
import CopyInput from "@paprika/copy-input";
const [controlledValue, setControlledValue] = React.useState("Copy me");
return (
<CopyInput>
<CopyInput.Input value={controlledValue} onChange={e => setControlledValue(e.target.value)} />
</CopyInput>
);