@ibrahimstudio/textarea v1.0.1
@ibrahimstudio/textarea, a reusable, highly customizable <textarea> component for React applications. This component allows developers to create beautiful, functional text areas with advanced styling, accessibility options, and a wide range of configurations for different use cases.
The custom <textarea> component provides an enhanced text area for React applications. It supports dynamic customization, accessibility features, and integrations with form management systems. Designed with flexibility in mind, this component helps developers implement complex features without sacrificing ease of use.
Code by Ibrahim Space Studio, Design by Ibrahim Design Studio.
1. Features
- Customizable Styling: Define border radius, colors, and more with dedicated props.
- Accessibility Support: Includes attributes like aria-label, autocomplete, and more.
- Validation Features: Show error or additional messages dynamically.
- Responsive Input Handling: Supports flexible configurations like minlength, maxlength, and word wrapping.
- Flexible Dimensions: Adjust the number of visible rows easily.
2. Installation
You can install this package via npm:
npm i @ibrahimstudio/textareaor via yarn:
yarn add @ibrahimstudio/textarea3. Usage
Import the Textarea component in your React application:
import { Textarea } from "@ibrahimstudio/textarea";Custom Styling
You can customize the appearance of the component by passing style-related props like radius, bcolor (background color), pcolor (primary color), and scolor (secondary color)
Handling Validation
Use the errormsg and additmsg props to display error or additional information dynamically.
4. API
Textarea Props
| Attribute | Type | Required | Description | Depend To | Default |
|---|---|---|---|---|---|
id | string | Yes | A unique identifier for the component. | - | '@ibrahimstudio/textarea' |
form | string | - | Associates the textarea with a <form> element via its id. | - | - |
name | string | Yes | The name of the textarea, used in form submissions. | - | 'textarea' |
placeholder | string | - | Placeholder text displayed inside the textarea when it's empty. | - | 'Typing in here now ...' |
value | string number | Yes | The current value of the textarea. | - | '' |
autocomplete | 'on' 'off' string | - | Specifies whether autocomplete is enabled. | - | - |
autocapitalize | string | - | Determines capitalization behavior for text input. | - | - |
autocorrect | 'on' 'off' | - | Specifies whether autocorrect is enabled. | - | - |
spellcheck | boolean | - | Enables spellchecking for the textarea. | - | - |
wrap | 'hard' 'soft' 'off' | - | Specifies how text is wrapped in the textarea. | - | - |
minlength | number | - | Minimum number of characters allowed. | - | - |
maxlength | number | - | Maximum number of characters allowed. | - | - |
radius | 'none' 'sm' 'md' 'lg' 'full' string | - | Border radius for the textarea. | - | 'md' |
bcolor | string | - | Background color for the textarea. | - | 'var(--theme-color-base)' |
pcolor | string | - | Primary color, often used for text or border highlights. | - | 'var(--theme-color-primary)' |
scolor | string | - | Secondary color for hover or focus states. | - | 'var(--theme-color-secondary)' |
labeled | boolean | - | Determines if the textarea includes a label. | - | true |
label | string | Yes | Text for the label when labeled is true. | labeled='true' | 'ISS Textarea' |
required | boolean | - | Marks the textarea as required for form submission. | - | false |
readonly | boolean | - | Makes the textarea read-only, disabling user input. | - | false |
disabled | boolean | - | Disables the textarea entirely. | - | false |
errormsg | string | - | Error message displayed below the textarea. | - | - |
additmsg | string | - | Additional information or helper text displayed below the textarea. | - | - |
Textarea Event(s)
| Attribute | Type | Required | Description | Depend To |
|---|---|---|---|---|
onChange | React.ChangeEventHandler | Yes | Callback fired when the value of the textarea changes. | - |
5. Contributing
Contributions are welcome! If you have any improvements, bug fixes, or features, feel free to open an issue or create a pull request on GitHub.
6. License
This project is licensed under the MIT License - see the LICENSE file for details.