input-field-zn/src/index.jsx

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.

import React, { useState } from "react";
import userIcon from "./assets/user.png";
import emailIcon from "./assets/email.png";
import passwordIcon from "./assets/password.png";
import eyeIcon from "./assets/eye.png";
import eyeSlashIcon from "./assets/eye-slash.png";
import "./index.css";
const InputField = (props) => {
  //default icons
  const fieldIcons = {
    user: userIcon,
    email: emailIcon,
    password: passwordIcon,
    eye: eyeIcon,
    eyeSlash: eyeSlashIcon,
  };
  const [passwordShown, setPasswordShown] = useState(false);

  const {
    value,
    name,
    type,
    placeholder = "Enter text",
    onChange,
    className,
    ...rest
  } = props;

  const {
    icon = false,
    width = "22px",
    top = "7px",
    left = "6px",
    right = "6px",
    iconPosition = "left",
    iconPath,
    iconName = "user",
    iconEye = false,
    iconEyePath = [eyeIcon, eyeSlashIcon],
    iconClassName = "",
    iconTint = 0.3,
    iconEyeTint = 0.3,
  } = props?.iconOverRide || {};

  //Field icon url
  const iconURI = iconPath || fieldIcons[iconName];

  //Password Eye icon url
  const iconEyeURI = iconEyePath;

  //Handle on Eye to show/hide password
  const handleShowPassword = () => {
    setPasswordShown(!passwordShown);
  };

  //Return input type conditionally
  const returnType = (inputType) => {
    let updateType = inputType;
    if (inputType === "password") {
      updateType = !passwordShown ? "password" : "text";
    }
    return updateType;
  };
  return (
    <div className={`inf-container ${className}`}>
      <input
        className="inf-input"
        type={returnType(type)}
        name={name}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        style={{
          paddingLeft: icon && iconPosition === "left" ? "28px" : "8px",
          paddingRight: icon && iconPosition === "right" ? "28px" : "8px",
        }}
        {...rest}
      />
      {icon && (
        <img
          className={`inf-img ${iconClassName}`}
          src={iconURI}
          style={{
            width: width,
            [iconPosition]: left,
            top: top,
            right: right,
            filter: `invert(${iconTint})`,
          }}
          alt={name}
        />
      )}

      {/* Eye Icon */}
      {iconEye && (
        <img
          onClick={handleShowPassword}
          className={`inf-img inf-eye-slash  ${iconClassName}`}
          src={passwordShown ? iconEyeURI[0] : iconEyeURI[1]}
          style={{ filter: `invert(${iconEyeTint})` }}
          alt={name}
        />
      )}
    </div>
  );
};

export default InputField;