Desktop Keyboard

import { DesktopKeyboard } from '@ertekinno/human-like/keyboard'
import '@ertekinno/human-like/desktop.css' // Import default styles

export default function Page() {
  return <DesktopKeyboard />
}

Component Props

The DesktopKeyboard is a simple, focused component with just 3 props:

Name	Type	Default	Description	Example
`highlightedKey`	`string \| undefined`	-	Key to highlight (supports normalization)	`"a"`, `"shift"`, `"backspace"`
`keyboardMode`	`'light' \| 'dark'`	`'light'`	Visual theme for the keyboard	`"dark"`
`onKeyPress`	`(key: string) => void`	-	Callback when a key is clicked	`(key) => console.log(key)`

Note: This component does not accept standard React props like className or style. For custom styling, wrap it in a container or use CSS custom properties.

Styling & Customization

Default Styling

The component comes with comprehensive CSS that can be imported:

import '@ertekinno/human-like/desktop.css'

CSS Custom Properties

The component uses CSS custom properties for easy theming:

.human-like-desktop-keyboard {
  --desktop-keyboard-bg: #ffffff;
  --desktop-keyboard-bg-dark: #2c2c2c;
  --desktop-key-bg: #f8f8f8;
  --desktop-key-bg-dark: #404040;
  --desktop-key-bg-hover: #e6e6e6;
  --desktop-key-bg-hover-dark: #505050;
  --desktop-key-bg-active: #007aff;
  --desktop-key-bg-active-dark: #007aff;
  --desktop-key-bg-pressed: #d0d0d0;
  --desktop-key-bg-pressed-dark: #606060;
  --desktop-key-text: #000000;
  --desktop-key-text-dark: #ffffff;
  --desktop-key-text-active: #ffffff;
  --desktop-key-border: #cccccc;
  --desktop-key-border-dark: #555555;
  --desktop-key-shadow: 0 2px 4px rgba(0,0,0,0.1);
  --desktop-key-shadow-dark: 0 2px 4px rgba(0,0,0,0.3);
  --desktop-key-shadow-pressed: inset 0 2px 4px rgba(0,0,0,0.2);
  --desktop-keyboard-radius: 8px;
  --desktop-key-radius: 4px;
}

Custom Styling Approach

Since the component doesn't accept className or style props, wrap it for custom styling:

<div className="my-keyboard-wrapper">
  <DesktopKeyboard 
    highlightedKey={currentKey}
    keyboardMode="light"
  />
</div>

.my-keyboard-wrapper .human-like-desktop-keyboard {
  /* Your custom styles here */
  transform: scale(0.9);
  border: 2px solid #007AFF;
}

Key Features

Key Highlighting

Auto-normalization: Keys like "caps lock", "CAPS", "caps" all map to the same key
Special keys: Supports "backspace", "⌫", "enter", "return", "space"
Duration: Highlights automatically clear after 200ms

Keyboard Layout

Full QWERTY layout with number row, function keys
Modifier keys: Shift, Ctrl, Alt, Cmd
Special keys: Tab, Caps Lock, Enter, Backspace, Space
Responsive sizing: Keys adapt to different screen sizes

Visual States

Active highlighting: When keys are pressed
Hover effects: Interactive feedback
Dark/Light themes: Automatic theme switching
High contrast support: Accessibility-friendly

Styling Classes

The component generates these CSS classes for customization:

.human-like-desktop-keyboard              /* Main container */
.human-like-desktop-keyboard__row         /* Keyboard rows */
.human-like-desktop-keyboard__key         /* Individual keys */
.human-like-desktop-keyboard__key--active /* Highlighted keys */

/* Size-specific classes */
.human-like-desktop-keyboard__key--tab
.human-like-desktop-keyboard__key--caps-lock  
.human-like-desktop-keyboard__key--shift
.human-like-desktop-keyboard__key--enter
.human-like-desktop-keyboard__key--backspace
.human-like-desktop-keyboard__key--space
.human-like-desktop-keyboard__key--ctrl
.human-like-desktop-keyboard__key--function
.human-like-desktop-keyboard__key--number

Desktop Keyboard

On this page