Skip to main content

TextArea

Reference​

  • The TextArea component is use for rendering a styled multi-line text input field.
  • It supports customization of dimensions, styles, and behavior.

Props​

  1. value

    • Type: string
    • Description: The current value of the text area.

  2. onEdit

    • Type: function
    • Description: Callback triggered when the text area's value changes.

  3. onFocusOut

    • Type: function
    • Description: Callback triggered when the text area loses focus.

  4. rows

    • Type: number
    • Description: Sets the number of visible rows in the text area.

  5. placeholder

    • Type: string
    • Description: Placeholder text displayed when the text area is empty.

  6. disabled

    • Type: boolean
    • Description: Disables the text area if true.

  7. style

    • Type: object
    • Description: Custom styles for the text area.

  8. height

    • Type: number
    • Description: Sets the height of the text area in pixels.

  9. width

    • Type: string
    • Default: '100%'
    • Description: Sets the width of the text area.

Usage Example​

import { TextArea } from './TextArea';

function Example(pageContext) {
    const { protrakComponents } = React.useContext(customWidgetContext);
    const { TextArea } = protrakComponents;
    return(
        <TextArea
            value="Sample text"
            onEdit={(val) => console.log('Edited value:', val)}
            rows={5}
            placeholder="Enter your text here"
            height={150}
            width="80%"
        />
    );
}
  • This renders a text area with 5 rows, a height of 150px, and a width of 80%. It logs the edited value on change.

UI​

TextArea