TextArea Component

The TextArea component is a customizable React component that provides a textarea input element with optional label, error message, and various styling options.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the TextArea component in your React application, follow these steps:

npm install @bolttech/frontend-foundations @bolttech/atoms-text-area

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-text-area

Once you have the required dependencies installed, you can start using the TextArea component in your React application.

Usage

The TextArea component provides a flexible way to render textarea input fields with optional labels and error messages. It supports various styling options and can be customized to fit your UI design.

To use the component, import it and include it in your JSX:

import React, {useState} from 'react';
import {TextArea} from '@bolttech/atoms-text-area';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations"; // You can import your TextArea component here

function App() {
  const [textareaValue, setTextareaValue] = useState('');

  const handleTextareaChange = (event) => {
    setTextareaValue(event.target.value);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <TextArea
        label="Your Feedback"
        placeholder="Type your feedback here..."
        value={textareaValue}
        onChange={handleTextareaChange}
        dataTestId="feedback-textarea"
      />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The TextArea component accepts the following props:

| Prop | Type | Description | |---------------|------------------|--------------------------------------------------------| | id | string | The id attribute for the textarea input element. | | dataTestId | string | The data-testid attribute for testing purposes. | | errorMessage| string | An optional error message to display below the textarea. | | label | string | An optional label to display above the textarea. | | required | boolean | Whether the textarea is required. Default is true. | | disabled | boolean | Whether the textarea is disabled. Default is false. | | value | string | The value of the textarea. | | variant | string | The visual style variant of the textarea. | | ...props | any | Additional props to pass to the textarea input element. |

Example

Here's an example of using the TextArea component:

<TextArea
  label="Your Feedback"
  placeholder="Type your feedback here..."
  value={textareaValue}
  onChange={handleTextareaChange}
  dataTestId="feedback-textarea"
/>

This will render a textarea input field with the provided label, placeholder, value, and onChange handler.

Contributing

Contributions to the TextArea component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.