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

Disabled text area

Demo Source Code

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

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>
  );
}

export default TextAreaExample;

Properties

Optional

disabled — boolean — Disables the text area.
label — string — Text area label.
onBlur — React.FocusEventHandler<HTMLTextAreaElement> — FocusEvent handler.
onChange — React.ChangeEventHandler<HTMLTextAreaElemen> — Event handler for area content changes. It should be provided for managed text area.
onKeyDown — React.KeyboardEventHandler<HTMLTextAreaElemen> — KeyboardEvent handler.
placeholder — string — Text area placeholder.
testId — string — This value is assigned to the data-testid attribute of the underlying <textarea> element, to facilitate the testing with testing-library. It is optimized out from production builds.
theme — TextAreaTheme — Ad hoc React Themes theme.
value — string — 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.
label — The optional div element with the label.
textarea — The underlying <textarea> element, and this style is also applied to the second, hidden <textarea> element, which is used internally for measurement purposes.

Properties​

TextAreaTheme​

Properties

TextAreaTheme