@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