@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>
);

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG