DroidInput

Overview

The DroidInput is a highly customizable input component for React applications. It provides a unified interface for various input types including text fields, textareas, and dropdown selects. This component offers extensive styling options and supports both controlled and uncontrolled forms.

Installation

npm install @droid-tech/react-droidinput

or

yarn add @droid-tech/react-droidinput

Dependencies

This package requires the following dependencies:

• React (>= 16.8.0)
• react-icons

Make sure to install them if they aren't already in your project:

npm install react react-dom react-icons

Basic Usage

import React, { useState } from "react";
import { DroidInput } from "@droid-tech/react-droidinput";
import { MdOutlineDriveFileRenameOutline } from "react-icons/md";

function App() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  };

  return (
    <DroidInput
      name="Name"
      type="text"
      placeholder="Enter your name"
      value={name}
      onChange={handleChange}
      startAdornment={<MdOutlineDriveFileRenameOutline />}
      width="100%"
      variant="filled"
    />
  );
}

Component Props

Basic Props

| Prop | Type | Default | Description | | ------------- | ------------------------------------ | ---------- | ------------------------------------------------------------------ | | name | string | - | Input field name (displays as uppercase label above the input) | | label | string | - | Label text that appears inside the input container | | placeholder | string | - | Placeholder text for the input | | value | string | - | Current value of the input (controlled component) | | onChange | function | - | Handler for input change events | | type | string | "text" | Input type (e.g., "text", "password", "number") | | variant | "outlined" | "filled" | "standard" | "standard" | Style variant of the input | | fullWidth | boolean | false | Whether the input should take full width of container | | required | boolean | false | Whether the field is required (adds asterisk) | | disabled | boolean | false | Whether the input is disabled | | error | boolean | false | Whether to show error styling | | helperText | string | - | Helper text to display (shows when field has been interacted with) |

Appearance Props

| Prop | Type | Default | Description | | --------------------- | ---------------- | ------------ | ------------------------------------------ | | width | string | number | - | Width of the input container | | haveWidth | boolean | false | Override default width behavior | | fontSize | string | number | - | Font size for the input text | | haveFontSize | boolean | false | Override default font size behavior | | border | string | - | Border style for the input | | haveBorder | boolean | false | Override default border behavior | | padding | string | number | - | Padding for the input | | havePadding | boolean | false | Override default padding behavior | | color | string | - | Text color for the input | | haveColor | boolean | false | Override default color behavior | | borderRadius | string | number | - | Border radius for the input | | haveBorderRadius | boolean | false | Override default border radius behavior | | backgroundColor | string | - | Background color for the input | | haveBackgroundColor | boolean | false | Override default background color behavior | | errorColor | string | - | Color used for error states | | helperTextColor | string | errorColor | Color for helper text |

Special Input Types

| Prop | Type | Default | Description | | ------------ | ---------------------------------------------------------------- | ------- | --------------------------------------------------------------------- | | multiline | boolean | false | Renders a textarea instead of an input | | rows | number | 3 | Number of rows for multiline textarea | | isDropdown | boolean | false | Renders as a dropdown select | | options | Array<{value: string, label: string, icon?: string, data?: any}> | [] | Options for dropdown | | onSelect | function | - | Handler for dropdown selection: (value: string, data?: any) => void |

Adornment Props

| Prop | Type | Default | Description | | ---------------- | --------- | ------- | -------------------------------------------- | | startAdornment | ReactNode | - | Content to display at the start of the input | | endAdornment | ReactNode | - | Content to display at the end of the input |

Advanced Props

| Prop | Type | Default | Description | | ------------ | ------------------------- | ------- | --------------------------------------------- | | inputProps | React.InputHTMLAttributes | - | Additional props to pass to the input element |

Usage Examples

Text Input with Icon

import { MdOutlineDriveFileRenameOutline } from "react-icons/md";

<DroidInput
  type="text"
  name="Name"
  variant="filled"
  placeholder="Enter full name"
  startAdornment={<MdOutlineDriveFileRenameOutline />}
  width="50%"
  haveBorder
  havePadding
  haveBorderRadius
/>;

Password Input with Toggle Icon

import { FaEyeSlash } from "react-icons/fa";

<DroidInput
  type="password"
  name="Password"
  variant="filled"
  placeholder="Enter password"
  endAdornment={<FaEyeSlash />}
  haveBorder
  havePadding
  haveBorderRadius
/>;

Multiline Textarea

<DroidInput
  type="text"
  name="Record"
  variant="filled"
  placeholder="Enter your message here"
  multiline
  rows={5}
  haveBorder
  havePadding
  color="red"
  haveBorderRadius
/>

Dropdown Select

import { IoIosArrowDown } from "react-icons/io";

const userTypes = [
  { value: "member", label: "Member" },
  { value: "mentor", label: "Mentor" },
  { value: "organisation", label: "Organisation" },
];

const [selectedUserType, setSelectedUserType] = useState("");

const handleUserTypeSelect = (value) => {
  setSelectedUserType(value);
};

<DroidInput
  type="text"
  name="select option"
  variant="filled"
  onSelect={handleUserTypeSelect}
  placeholder="Select user type"
  startAdornment={<IoIosArrowDown />}
  isDropdown={true}
  options={userTypes}
  value={selectedUserType}
  haveBorder
  havePadding
  haveBorderRadius
  haveBackgroundColor
  backgroundColor=""
/>;

Form with Multiple Input Types

import React, { ChangeEvent, useState } from "react";
import { FaEyeSlash } from "react-icons/fa";
import { MdOutlineDriveFileRenameOutline } from "react-icons/md";
import { IoIosArrowDown } from "react-icons/io";
import { DroidInput } from "@droid-tech/react-droidinput";

const App = () => {
  const userTypes = [
    { value: "member", label: "Member" },
    { value: "mentor", label: "Mentor" },
    { value: "organisation", label: "Organisation" },
  ];

  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    userType: "",
    bio: "",
    password: "",
  });

  const handleChange = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleUserTypeSelect = (value: string) => {
    setFormData((prev) => ({ ...prev, userType: value }));
  };

  return (
    <div style={{ maxWidth: "500px", margin: "0 auto" }}>
      <DroidInput
        type="text"
        name="firstName"
        label="First Name"
        variant="filled"
        placeholder="Enter first name"
        value={formData.firstName}
        onChange={handleChange}
        startAdornment={<MdOutlineDriveFileRenameOutline />}
        width="100%"
        haveBorder
        required
      />

      <DroidInput
        type="password"
        name="password"
        label="Password"
        variant="outlined"
        placeholder="Enter password"
        value={formData.password}
        onChange={handleChange}
        endAdornment={<FaEyeSlash />}
        fullWidth
        haveBorderRadius
      />

      <DroidInput
        type="text"
        name="bio"
        label="Biography"
        variant="standard"
        placeholder="Tell us about yourself"
        value={formData.bio}
        onChange={handleChange}
        multiline
        rows={4}
        fullWidth
        color="#333"
        haveColor
      />

      <DroidInput
        name="userType"
        label="User Type"
        variant="filled"
        placeholder="Select user type"
        value={formData.userType}
        isDropdown={true}
        options={userTypes}
        onSelect={handleUserTypeSelect}
        startAdornment={<IoIosArrowDown />}
        fullWidth
        backgroundColor="#f5f5f5"
        haveBackgroundColor
      />
    </div>
  );
};

export default App;

Style Customization

The DroidInput component provides extensive customization options through its props. Each style property has a corresponding have[Property] boolean prop that determines whether to use the provided value or the default one.

For instance:

• Setting color="red" and haveColor={true} will use the red color
• Setting color="red" but haveColor={false} (or omitting it) will use the default color

This mechanism gives you fine-grained control over which styles to customize and which to keep as default.

Component Variants

Standard

The default variant with minimal styling.

Outlined

Features a border around the input.

Filled

Has a solid background color and typically no visible border until focused.

Dropdown Implementation

When isDropdown={true} is set, DroidInput transforms into a custom dropdown selector:

• Clicking the input toggles the dropdown options list
• The options list appears as a modal that covers most of the screen
• Each option can have an optional icon property
• Selected values are displayed in the input field
• The dropdown has custom hover effects (background color changes to #1abc9c on hover)

Accessibility Features

• Proper label association using htmlFor attribute
• Visual indication for required fields (asterisk)
• Disabled state styling with reduced opacity
• Error state styling for validation feedback

Error Handling

• Set error={true} to indicate validation errors
• Provide helperText to describe the error or provide guidance
• Customize error colors with errorColor and helperTextColor

Notes and Limitations

1. The component uses inline styles rather than CSS classes for styling
2. For more advanced use cases, you might need to extend the component
3. The component detects user interaction to show helper text only after the field has been interacted with

TypeScript Support

The component is fully typed with TypeScript, providing type definitions for all props including the OptionType for dropdown options.