EyeSwitch

Seamless Password Visibility Control

EyeSwitch is a versatile, framework-agnostic JavaScript library designed to manage password visibility in forms with customizable keyboard shortcuts.

See DemoView on GitHub
Show password (Ctrl + 8)

Features

  • Framework-agnostic: Use with any JavaScript framework or vanilla JS
  • Environment flexible: Works in browser, mobile, and desktop environments
  • Toggle password visibility for individual or all password fields
  • Customizable keyboard shortcuts
  • Two toggle modes: Focus and All
  • Real-time event logging
  • Easy integration with existing projects
  • Built with accessibility in mind

Installation

npm install eye-switch

Or using yarn:

yarn add eye-switch

Usage

Basic Usage


import EyeSwitch from 'eye-switch';

const eyeSwitch = new EyeSwitch({
  toggleMode: 'all',
  keyCombo: 'Ctrl+Shift+L',
  onToggle: () => console.log('Visibility toggled')
});

eyeSwitch.on('visibilityChanged', ({ isVisible, affectedFields }) => {
  const passwordFields = document.querySelectorAll('input[type="password"]');
  passwordFields.forEach(field => {
    field.type = isVisible ? 'text' : 'password';
  });
});

document.addEventListener('keydown', (event) => eyeSwitch.handleKeyDown(event));

document.querySelector('#toggleButton').addEventListener('click', () => eyeSwitch.toggle());

Advanced Usage with React


import React, { useState, useEffect, useRef } from 'react';
import EyeSwitch from 'eye-switch';

function PasswordForm() {
  const [passwordVisible, setPasswordVisible] = useState(false);
  const eyeSwitchRef = useRef(null);

  useEffect(() => {
    eyeSwitchRef.current = new EyeSwitch({
      toggleMode: 'focus',
      keyCombo: 'Ctrl+Shift+L',
      onToggle: () => setPasswordVisible(prev => !prev)
    });

    const handleKeyDown = (event) => eyeSwitchRef.current.handleKeyDown(event);
    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return (
    <form>
      <input
        type={passwordVisible ? 'text' : 'password'}
        placeholder="Enter password"
      />
      <button type="button" onClick={() => eyeSwitchRef.current.toggle()}>
        {passwordVisible ? 'Hide' : 'Show'} Password
      </button>
    </form>
  );
}

export default PasswordForm;

API Reference

EyeSwitch Class

The EyeSwitch class accepts the following options:

  • toggleMode: 'focus' | 'all' (default: 'focus')
  • keyCombo: string (default: 'Ctrl+8' or 'Cmd+8' on Mac)
  • onToggle: () => void

Methods

  • setToggleMode(mode: 'focus' | 'all'): Set the toggle mode
  • setKeyCombo(keyCombo: string): Set the keyboard shortcut
  • handleKeyDown(event: KeyboardEvent): Handle keydown events
  • setFocusedField(fieldId: string): Set the currently focused field
  • toggle(): Toggle password visibility

Events

  • visibilityChanged: Fired when password visibility changes
  • modeChanged: Fired when toggle mode changes
  • keyComboChanged: Fired when the keyboard shortcut changes