The Textarea component is a standard multiline text input with some enhancements that can be used as a controlled or uncontrolled component.
npm install @paprika/textareaThe Textarea component is a standard multiline text input with some enhancements that can be used as a controlled or uncontrolled component.
``
yarn add @paprika/textarea
or with npm:
`
npm install @paprika/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. |
All props and attributes are spread onto the root container
element.$3
The Textarea can be used as a controlled or uncontrolled component.
To use it as a controlled comnponent:
`js
import Textarea from "@paprika/textarea";
...
const [value, setValue] = React.useState("Hello world");
...
onChange={event => { setValue(event.target.value) }}
/>
`To use it as an uncontrolled component:
js
import Textarea from "@paprika/textarea";
...
const refTextarea = React.useRef();
...
ref={refTextarea}
/>
...
refTextarea.current.value // latest value
``- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG