@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