Skip to main content

TextArea

import { TextArea } from '@dr.pogodin/react-utils';

The TextArea component implements an auto-resizeable text area, i.e. a version of the standard <textarea> that automatically expands and shrinks its height as its content is modified.

It is implemented as a themable component, using React Themes library.

Demo
Demo Source Code
import { useState } from 'react';
import { TextArea } from '@dr.pogodin/react-utils';

export default function TextAreaExample() {
  const [value, setValue] = useState('');
  const [value2, setValue2] = useState('Disabled text area');
  return (
    <div>
      <TextArea
        onChange={(e) => setValue(e.target.value)}
        placeholder="Auto-resizeable text area"
        value={value}
      />
      <TextArea
        disabled
        onChange={(e) => setValue2(e.target.value)}
        value={value2}
      />
    </div>
  );
}

Properties​

  • disabled — boolean — Optional. Disables the text area.
  • onChange — React.ChangeEventHandler<HTMLTextAreaElemen> — Event handler for area content changes. It is optional, and it should be provided for managed text area.
  • onKeyDown — React.KeyboardEventHandler<HTMLTextAreaElemen> — Optional KeyboardEvent handler.
  • placeholder — string — Optional. Text area placeholder.
  • theme — TextAreaTheme — Ad hoc React Themes theme.
  • value — string — Optional. Text area value, it should be provided to use the text area as a managed input.
  • Other ThemedComponent props.

TextAreaTheme​

See React Themes docs to learn how themed components work, and how they can be themed. The valid theme keys for TextArea are:

  • container — The root container of the component.
  • hidden — The hidden <textarea> element, which is used internally for measurement purposes. This style is applied to that element in addition to the textarea style below.
  • textarea — The underlying <textarea> element, and this style is also applied to the second, hidden <textarea> element, which is used internally for measurement purposes.