Input Component

A versatile and customizable React input component for various form input types.

Installation

npm install yashwant-component

Usage

First, import the component and its styles:

import { Input } from "yashwant-component";
import "yashwant-component/dist/index.css";

Then, use the component in your React application:

import React, { useState } from "react";
import { Input } from "yashwant-component";

function App() {
  const [inputValue, setInputValue] = useState("");

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <Input
        type="text"
        id="exampleInput"
        label="Example Input"
        placeholder="Enter text here..."
        value={inputValue}
        onChange={handleInputChange}
      />
    </div>
  );
}

Props

| Prop Name | Type | Default | Description | |-----------|------|---------|-------------| | type | string | "text" | Input type (e.g., "text", "password", "email", etc.) | | id | string | Required | Unique identifier for the input | | label | string | - | Label text for the input | | placeholder | string | - | Placeholder text | | value | string | "" | Current value of the input | | onChange | function | - | Function to handle input changes | | variant | string | "normal" | Input variant ("normal", "floating", "outlined", "filled", "underlined", "rounded") | | state | string | "default" | Input state ("default", "hover", "focus", "disabled", "readonly", "error", "success", "loading") | | clearable | boolean | false | Whether to show a clear button | | validationMessage | string | - | Validation message to display | | validationMessageStatus | string | - | Status of validation message ("error", "warning", "success") | | characterLimit | number | - | Maximum number of characters allowed | | prefix | node | - | Content to display before the input | | suffix | node | - | Content to display after the input | | autocomplete | string | - | Autocomplete attribute for the input | | helpText | string | - | Help text to display below the input | | icon | node | - | Icon to display within the input | | darkMode | boolean | false | Enable dark mode styling | | isURL | boolean | false | Validate and format as URL | | isTelephone | boolean | false | Format as telephone number | | countryCode | string | "+1" | Country code for telephone input | | fileTypes | array | [] | Allowed file types for file input | | maxFileSize | number | 5 * 1024 * 1024 | Maximum file size in bytes | | multiple | boolean | false | Allow multiple file selection | | autosize | boolean | false | Auto-resize textarea based on content | | debounceDelay | number | 300 | Delay for debounce functionality (in milliseconds) |

Features

1. Multiple Input Types: Supports various input types including text, password, email, number, date, time, file, and more.
2. Customizable Variants: Choose from different input styles like normal, floating label, outlined, filled, underlined, and rounded.
3. State Management: Handles different input states such as default, hover, focus, disabled, read-only, error, success, and loading.
4. Validation: Built-in support for displaying validation messages with customizable status.
5. Character Limit: Option to set and display character limits.
6. Prefix and Suffix: Add content before or after the input.
7. Icons: Support for adding icons to the input.
8. Clear Button: Optional clear button for easy input clearing.
9. File Upload: Specialized handling for file inputs with type and size restrictions.
10. Telephone Input: Formatted telephone number input with country code selection.
11. URL Formatting: Automatic URL formatting and validation.
12. Textarea Support: Autosize functionality for textarea inputs.
13. Dark Mode: Built-in dark mode styling.
14. Accessibility: Designed with accessibility in mind, including proper ARIA attributes.

Examples

Basic Text Input

<Input
  type="text"
  id="basicInput"
  label="Basic Input"
  placeholder="Enter text..."
  value={inputValue}
  onChange={handleInputChange}
/>

Password Input with Validation

<Input
  type="password"
  id="passwordInput"
  label="Password"
  placeholder="Enter password..."
  value={passwordValue}
  onChange={handlePasswordChange}
  validationMessage="Password must be at least 8 characters long"
  validationMessageStatus="error"
/>

Floating Label Input

<Input
  type="text"
  id="floatingInput"
  label="Floating Label"
  placeholder="Enter text..."
  value={floatingValue}
  onChange={handleFloatingChange}
  variant="floating"
/>

File Upload

<Input
  type="file"
  id="fileInput"
  label="Upload File"
  onChange={handleFileChange}
  multiple
  fileTypes={[".pdf", ".doc", ".docx"]}
  maxFileSize={10 * 1024 * 1024} // 10MB
/>

Search Input with Debounce

<Input
  type="search"
  id="searchInput"
  label="Search"
  placeholder="Type to search..."
  value={searchQuery}
  onChange={handleSearchChange}
  debounceDelay={500}
/>

Styling

The component comes with default styling. To customize the appearance, you can override the CSS classes or use the darkMode prop for a built-in dark theme.

Accessibility

The Input component is designed with accessibility in mind, including proper labeling, ARIA attributes, and keyboard navigation support.

License

This project is licensed under the MIT License.