useDetectCapsLock

useDetectCapsLock.tsx

useDetectCapsLock

INPUT

// Detect if Caps Lock is enabled during input

Quick Usage

const { isCapsLockEnabled, isSupported } = useDetectCapsLock();

Features

Caps Lock Detection

Keyboard Events

Browser Support Check

Real-time Updates

When to Use

Great for password inputs, login forms, or any text input where Caps Lock awareness improves user experience.

Interactive Example

Caps Lock Detection

Caps Lock: Disabled

Detection: Supported

Last Detection: Never

Test Input (type some letters):

Password Input:

Try this:

• Press Caps Lock key to toggle it on/off

• Type letters in the input fields above

• Notice how the password field shows a warning when Caps Lock is enabled

Perfect for login forms and password inputs!

Complete Example

import { useDetectCapsLock } from '@usegrand/react-hokss';

function PasswordInput() {
  const { isCapsLockEnabled, isSupported } = useDetectCapsLock({
    onCapsLockChange: (enabled) => {
      console.log('Caps Lock is now:', enabled ? 'ON' : 'OFF');
    },
    global: true
  });

  return (
    <div>
      <input 
        type="password" 
        placeholder="Enter password..."
        className={isCapsLockEnabled ? 'border-red-500' : ''}
      />
      {isCapsLockEnabled && (
        <div className="warning">
          ⚠️ Caps Lock is ON
        </div>
      )}
      {!isSupported && (
        <div className="info">
          Caps Lock detection not supported in this browser
        </div>
      )}
    </div>
  );
}

API Reference

Parameters

optionsDetectCapsLockOptions

Configuration options for Caps Lock detection

options.onCapsLockChangefunction

Callback function when Caps Lock state changes

options.autoDetectboolean

Whether to auto-detect on mount (default: true)

options.globalboolean

Whether to listen globally or on target element (default: true)

options.targetElementHTMLElement

Specific element to attach listeners to (if not global)

Returns

DetectCapsLockResult

Object containing Caps Lock state and controls

isCapsLockEnabled

Boolean indicating if Caps Lock is currently enabled

isSupported

Boolean indicating if detection is supported

checkCapsLock

Function to manually check Caps Lock state

resetCapsLock

Function to reset Caps Lock state

lastDetectionTime

Date of last Caps Lock detection

usePageLeave

All Hooks

useTristate