@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