@paprika/textarea

@paprika/textarea

Description

The Textarea component is a standard multiline text input with some enhancements that can be used as a controlled or uncontrolled component.

Installation

yarn add @paprika/textarea

or with npm:

npm install @paprika/textarea

Props

Textarea

Prop	Type	required	default	Description
a11yText	string	false	null	Provides a non-visible label for this textarea for assistive technologies.
canExpand	bool	false	true	If true the height will expand automatically to fit content up to the value of maxHeight.
children	node	false	null	Optional Textarea.Container to collect props for root DOM element.
defaultValue	string	false	null	Sets the default textarea value for an uncontrolled component.
hasError	bool	false	false	If true displays a red border around textarea to indicate an error.
isDisabled	bool	false	false	If true it makes the textarea disabled.
isReadOnly	bool	false	false	If true it makes the textarea read only.
maxHeight	[number,string]	false	300	The maximum height of the textarea.
minHeight	[number,string]	false	80	The minimum / default height of the textarea.
onChange	func	false	() => {}	Callback to be executed when the textarea value is changed. Receives the onChange event as an argument. Required when component is controlled.
size	[ Textarea.types.size.SMALL, Textarea.types.size.MEDIUM, Textarea.types.size.LARGE]	false	Textarea.types.size.MEDIUM	The size of the textarea input (font size).
value	string	false	undefined	The value inside of the textarea input. Defining this prop will make this a controlled component. Do not use in conjunction with defaultValue.

Textarea.Container

All props and attributes are spread onto the root container <div> element.

Usage

The Textarea can be used as a controlled or uncontrolled component.

To use it as a controlled comnponent:

import Textarea from "@paprika/textarea";
...
const [value, setValue] = React.useState("Hello world");
...
<Textarea
  value={value}
  onChange={event => { setValue(event.target.value) }}
/>

To use it as an uncontrolled component:

import Textarea from "@paprika/textarea";
...
const refTextarea = React.useRef();
...
<Textarea
  defaultValue="Hello world"
  ref={refTextarea}
/>
...
refTextarea.current.value // latest value

Links

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