Skip to main content


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 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 (
onChange={(e) => setValue(}
placeholder="Auto-resizeable text area"
onChange={(e) => setValue2(}


  • disabledboolean — Optional. Disables the text area.
  • onChangeReact.ChangeEventHandler<HTMLTextAreaElemen>Event handler for area content changes. It is optional, and it should be provided for managed text area.
  • onKeyDownReact.KeyboardEventHandler<HTMLTextAreaElemen> — Optional KeyboardEvent handler.
  • placeholderstring — Optional. Text area placeholder.
  • themeTextAreaThemeAd hoc React Themes theme.
  • valuestring — Optional. Text area value, it should be provided to use the text area as a managed input.
  • Other ThemedComponent props.


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.