🐉 dragon-eye

A lightweight React component library that provides customizable Eye and EyeOff icons — perfect for toggling password visibility in your UI.

🔗 GitHub Repository

View on GitHub

👤 Author

iamxerrycan

• LinkedIn
• Instagram
• GitHub

✨ Features

✅ Toggle password visibility with a click (onClick support)

🎨 Fully customizable width, height, and colour

🧩 Optional className for styling (Tailwind, Bootstrap, etc.)

♿ Accessible with aria-label and keyboard interaction

⚛️ Lightweight, dependency-free React components

📦 Installation

# Using npm
npm install dragon-eye

# Or using yarn
yarn add dragon-eye

📥 Import

import { Eye, EyeOff } from "dragon-eye";

💡 Usage Example

import React, { useState } from 'react';
import { Eye, EyeOff } from 'dragon-eye';

const PasswordInput = () => {
  const [visible, setVisible] = useState(false);

  return (
    <div style={{ position: 'relative' }}>
      <input
        type={visible ? 'text' : 'password'}
        placeholder="Enter your password"
      />
      <span
        style={{ position: 'absolute', right: 10, top: 10, cursor: 'pointer' }}
        onClick={() => setVisible((v) => !v)}
      >
        {visible ? (
          <EyeOff colour="red" width="24px" height="24px" />
        ) : (
          <Eye colour="green" width="24px" height="24px" />
        )}
      </span>
    </div>
  );
};

export default PasswordInput;