input-field-zn/README.md

A lightweight and customizable React input field component with built-in icons for user, email, and password inputs. Includes password visibility toggle (eye/eye-slash) and modern styling support for easy integration in any form.

# 🧩 React InputField Component

A lightweight and customizable React input component with built-in icons for **user**, **email**, and **password** fields — including an **eye/eye-slash** toggle for showing and hiding passwords.

Perfect for modern form UIs that need visual clarity and flexibility.  
Supports custom icons, tints, positioning, and easy styling via CSS.

---

## Default icons

1. user
2. email
3. password
4. eye/eyeSlash

---

## Features

✅ User, Email, and Password icons included  
✅ Built-in Eye / Eye-Slash toggle for passwords  
✅ Custom icon override support (own image or SVG)  
✅ Change icon color tint dynamically  
✅ Lightweight — built with Vite  
✅ Easy to style with your own CSS  
✅ Supports both left/right icon placement

---

## Installation

Install via npm:

```bash
npm install input-field-zn
```

## Usage Example

```bash

import React, { useState } from "react";
import InputField from "input-field-zn";
import "input-field-zn/dist/index.css";

function App() {
  const [formData, setFormData] = useState({ email: "", password: "",contact:null });

  return (
    <div style={{ width: "250px", margin: "50px auto" }}>
      <InputField
        type="email"
        name="email"
        value={formData.email}
        placeholder="Enter email"
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        iconOverRide={{ icon: true, iconName: "email" }}
      />

      <InputField
        type="password"
        name="password"
        value={formData.password}
        placeholder="Enter password"
        onChange={(e) => setFormData({ ...formData, password: e.target.value })}
        iconOverRide={{ icon: true, iconName: "password", iconEye: true }}
      />
      <InputField
        type="number"
        name="contact"
        value={formData.contact}
        placeholder="Enter contact"
        onChange={(e) => setFormData({ ...formData, contact: e.target.value })}
        // iconOverRide={{ icon: false, iconName: "password", iconEye: false }}
      />
    </div>
  );
}

export default App;


```

## Props

| Prop           | Type       | Default        | Description                              |
| -------------- | ---------- | -------------- | ---------------------------------------- |
| `value`        | `string`   | `""`           | Input value                              |
| `name`         | `string`   | —              | Input name                               |
| `type`         | `string`   | `"text"`       | Input type (text, email, password, etc.) |
| `placeholder`  | `string`   | `"Enter text"` | Placeholder text                         |
| `onChange`     | `function` | —              | Change handler                           |
| `className`    | `string`   | —              | Add custom class to container            |
| `iconOverRide` | `object`   | `{}`           | Customize icon appearance and behavior   |

## iconOverRide Object Options

| Option          | Type      | Default                   | Description                             |
| --------------- | --------- | ------------------------- | --------------------------------------- |
| `icon`          | `boolean` | `false`                   | Show/hide icon                          |
| `iconName`      | `string`  | `"user"`                  | One of: `user`, `email`, `password`     |
| `iconPath`      | `string`  | —                         | Custom image path for icon              |
| `iconEye`       | `boolean` | `false`                   | Show password toggle (eye/eye-slash)    |
| `iconEyePath`   | `array`   | `[eyeIcon, eyeSlashIcon]` | Custom icons for eye/eye-slash          |
| `width`         | `string`  | `"22px"`                  | Icon width                              |
| `top`           | `string`  | `"7px"`                   | Top offset                              |
| `left`          | `string`  | `"6px"`                   | Left offset                             |
| `right`         | `string`  | `"6px"`                   | Right offset                            |
| `iconPosition`  | `string`  | `"left"`                  | Position of icon: `"left"` or `"right"` |
| `iconTint`      | `number`  | `0`                       | Invert color tint (0–1 range)           |
| `iconEyeTint`   | `number`  | `0`                       | Invert color tint for eye icons         |
| `iconClassName` | `string`  | `""`                      | Additional class for icon styling       |