DroidInput

A customizable and reusable input component for React applications with support for text input, dropdowns, multiline text areas, and various UI customizations.

Installation

Install the package using npm or yarn:

npm install droid-input

or

yarn add droid-input

Usage

Import the component in your React project:

import React, { useState } from "react";
import DroidInput from "droid-input";

const App = () => {

  return (
    ## Basic Text Input
    <DroidInput
      label="Username"
      placeholder="Enter your username"
      value={username}
      onChange={(e) => setUsername(e.target.value)}
    />

     ## Password Input
     <DroidInput
  label="Password"
  type="password"
  placeholder="Enter your password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>

  ## Mutiline TextArea
  <DroidInput
  label="Message"
  multiline
  rows={4}
  placeholder="Type your message here..."
  value={message}
  onChange={(e) => setMessage(e.target.value)}
/>

 ## Dropdown Select
<DroidInput
  label="Select a Country"
  isDropdown
  value={selectedCountry}
  onSelect={(value) => setSelectedCountry(value)}
  options={[
    { value: "us", label: "United States" },
    { value: "uk", label: "United Kingdom" },
    { value: "ng", label: "Nigeria" },
  ]}
/>

 ## With Adornment
 <DroidInput
  label="Search"
  placeholder="Search here..."
  startAdornment={<SearchIcon />}
  endAdornment={<ClearIcon onClick={() => setSearch("")} />}
  value={search}
  onChange={(e) => setSearch(e.target.value)}
/>
  );
};

export default App;

Props

| Prop | Type | Default | Description | | ------------------- | ------------------------------------------- | --------------------- | ----------------------------------- | | pHolder | string | "" | Placeholder text | | bColor | string | "" | Border color | | pLeft | number | undefined | Left padding | | h | number | undefined | Height of the input | | title | string | "" | Input title | | w | number | undefined | Width of the input | | mTop | number | undefined | Margin top | | name | string | "" | Input name | | label | string | "" | Input label | | placeholder | string | "" | Placeholder text | | value | string | "" | Input value | | type | string | "text" | Input type ( "text", "password") | | variant | "outlined" \| "filled" \| "standard" | "standard" | Input variant | | startAdornment | React.ReactNode | undefined | Start adornment (icon, text, etc.) | | endAdornment | React.ReactNode | undefined | End adornment (icon, text, etc.) | | fullWidth | boolean | false | Expands input to full width | | multiline | boolean | false | Enables textarea mode | | rows | number | 3 | Number of rows (if multiline) | | error | boolean | false | Displays error styling | | helperText | string | "" | Helper text below input | | required | boolean | false | Marks input as required | | disabled | boolean | false | Disables the input | | inputProps | React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> | Additional input attributes | | borderBottomColor | string | "" | Custom border color | | errorColor | string | "" | Custom error color | | helperTextColor | string | "" | Helper text color | | isDropdown | boolean | false | Enables dropdown mode | | options | OptionType[] | [] | Dropdown options | | onSelect | (value: string, data?: any) => void | undefined | Cb when dropdown option is selected |