Textarea

e => setValue(e.target.value)

e => console.log(e.target.value)

import * as React from "react";
import { Textarea } from "spaceweb/textarea";

export default () => {
  const [value, setValue] = React.useState("Hello");
  return (
    <Textarea
      value={value}
      onChange={e => setValue(e.target.value)}
      debouncedOnChange={e => console.log(e.target.value)}
      debounceInterval={200}
      style="w-3/4"
      intent="default"
      variant="default"
      placeholder="Controlled Input"
    />
  );
}

Examples

By default, Textarea is not resizeable. However, you can use overrides as in the example above to supply minimum and maximum dimensions for the component. This will allow users to resize the Textarea within the boundaries you define.

AutoFocus

Textarea accepts an autoFocus prop. For information on its behaviour, check Input's autoFocus example.

As with many of our components, there is also an uncontrolled version, StatefulTextarea, which manages its own state.

API

Textarea props

You can check the implementation of the component for more details.

Textarea exports

You can import this module like so:

import {STATE_CHANGE_TYPE} from 'spaceweb/textarea'

It exports the following components or utility functions:

• STATE_CHANGE_TYPE
• StatefulTextarea
• StyledTextarea
• StyledTextareaContainer
• Textarea