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

Sample error message

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');
  const [value3, setValue3] = useState('');
  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}
      />
      <TextArea
        error="Sample error message"
        onChange={(e) => setValue3(e.target.value)}
        placeholder="Text-area with sample error message"
        value={value3}
      />
    </div>
  );
}

export default TextAreaExample;

Properties

Optional

disabled — boolean — Disables the text area.
error — ReactNode — Optional. If a truthy value the error theme key is added to the root element of the component, and unless the value is true it is also rendered right after the inner <textarea>element, wrapped into a <div> with errorMessage theme key (thus, setting it equal true allows to apply error theme key to the root element, without adding the error message <div>).
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.
error — Added to the root element when error prop value is thruthy.
errorMessage — Applied to the <div> wrapper of the error message, when it is rendered (see error prop documentation for details).
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