@paprika/copy-input

@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