textarea

TextArea is a customizable React functional component that renders a textarea input field. It allows for various styling and layout options through its props, making it flexible and easy to use in different UI designs.

Features

• Customizable Border: Adjust border color, width, and radius.
• Flexible Dimensions: Control the number of rows and columns.
• Margin Control: Set top and bottom margins for spacing.
• Placeholder Text: Define custom placeholder text.
• Default Values: Pre-configured rows and columns for quick setup.
• CSS Integration: Supports className and inline styles.
• Lightweight: Simple, focused functionality.
• TypeScript Support: Provides type safety and IntelliSense.

Installation

To use the textarea component in your React application, install it via npm:

npm install @droid-tech/react-ts-textarea

Usage

To use the textarea component, import it and provide the required props:

import React from "react";
import { textarea } from "@droid-tech/react-ts-textarea";

<TextArea
  bColor="red"
  bWidth={3}
  bRadius={5}
  rws={12}
  col={100}
  mTop={30}
  mBottom={10}
  pHolder="Type your message here..."
/>;

Props

The textarea component accepts the following props:

| Prop | Type | Default Value | Description | | --------- | -------- | ------------- | ------------------------------------------------ | | bColor | string | undefined | The color of the border. | | bWidth | number | undefined | The width of the border in pixels. | | bRadius | number | undefined | The border radius for rounded corners in pixels. | | rws | number | 8 | The number of rows (height) for the textarea. | | col | number | 60 | The number of columns (width) for the textarea. | | mTop | number | undefined | The top margin in pixels. | | mBottom | number | undefined | The bottom margin in pixels. | | pHolder | number | undefined | Font weight of the textarea text |