Mobile Keyboard

import { MobileKeyboard, KeyboardView, ShiftState } from '@ertekinno/human-like/keyboard'
import '@ertekinno/human-like/mobile.css' // Import default styles

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

Component Props

Name	Type	Default	Description	Example
`currentView`	`KeyboardView`	`KeyboardView.Letters`	Active keyboard view	`KeyboardView.Numbers`
`onViewChange`	`(event: ViewChangeEvent) => void`	-	View change callback with metadata	`(e) => console.log(e.currentView)`
`shiftState`	`ShiftState`	`ShiftState.Off`	Current shift state	`ShiftState.Locked`
`onShiftStateChange`	`(event: ShiftChangeEvent) => void`	-	Shift state change callback	`(e) => console.log(e.currentState)`
`highlightedKey`	`string \| undefined`	-	Key to highlight with auto-normalization	`"a"`, `"⇧"`, `"space"`
`keyboardMode`	`'light' \| 'dark'`	`'light'`	Visual theme	`"dark"`
`onKeyPress`	`(key: string) => void`	-	Key press callback	`(key) => handleKeyPress(key)`
`unstyled`	`boolean`	`false`	Skip default styles	`true`
`className`	`string`	`''`	Additional CSS classes	`"my-keyboard"`
`classes`	`KeyboardClasses`	`{}`	CSS class overrides	`{root: 'custom-root'}`
`style`	`React.CSSProperties`	`{}`	Inline styles	`{maxWidth: '400px'}`
`labelOverrides`	`LabelOverrides`	`{}`	Custom key labels	`{space: 'SPACE'}`
`iconOverrides`	`IconOverrides`	`{}`	Custom key icons	`{backspace: <Icon />}`
`uppercaseLettersWhenShifted`	`boolean`	`true`	Show uppercase when shift is active	`false`

Ref Interface

The component supports imperative control via ref:

interface MobileKeyboardRef {
  resetKeyboard: () => void;
  setView: (view: KeyboardView) => void;
  setShift: (state: ShiftState) => void;
  highlightKey: (key: string) => void;
}

Styling & Customization

Default Styling

Import the comprehensive CSS for full iOS-style appearance:

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

CSS Custom Properties

Easy theming with CSS custom properties:

.human-like-mobile-keyboard {
  --keyboard-bg: #ffffff;
  --keyboard-bg-dark: #2c2c2c;
  --key-bg: #f8f8f8;
  --key-bg-dark: #404040;
  --key-bg-modifier: #e6e6e6;
  --key-bg-modifier-dark: #505050;
  --key-bg-active: #007aff;
  --key-bg-active-dark: #007aff;
  --key-bg-shift-locked: #007aff;
  --key-bg-shift-locked-dark: #007aff;
  --key-text: #000000;
  --key-text-dark: #ffffff;
  --key-text-active: #ffffff;
  --key-border: #cccccc;
  --key-border-dark: #555555;
  --key-shadow: 0 2px 4px rgba(0,0,0,0.1);
  --key-shadow-dark: 0 2px 4px rgba(0,0,0,0.3);
  --key-shadow-active: inset 0 2px 4px rgba(0,0,0,0.2);
  --key-shadow-active-dark: inset 0 2px 4px rgba(0,0,0,0.2);
  --keyboard-shadow: 0 4px 16px rgba(0,0,0,0.1);
  --keyboard-shadow-dark: 0 4px 16px rgba(0,0,0,0.4);
  --keyboard-radius: 8px;
  --key-radius: 4px;
}

Unstyled Usage

Complete control over styling:

<MobileKeyboard 
  unstyled={true}
  className="my-custom-keyboard"
  style={{ background: 'transparent' }}
  currentView={KeyboardView.Letters}
/>

Keyboard Views & States

KeyboardView Enum

enum KeyboardView {
  Letters = 'letters',
  Numbers = 'numbers', 
  Symbols = 'symbols'
}

ShiftState Enum

enum ShiftState {
  Off = 'off',      // Normal lowercase
  On = 'on',        // Single uppercase (iOS behavior)
  Locked = 'locked' // Caps lock (double-tap shift)
}

Key Features

iOS-Style Shift Behavior

Single tap: Toggles shift on/off
Double tap: Locks caps (red indicator)
Auto-off: Shift turns off after typing a letter (not caps lock)

View Switching

Letters ↔ Numbers: ABC / 123 keys
Numbers ↔ Symbols: #+= key
Auto-switching: Returns to letters after punctuation

Key Highlighting

Auto-normalization: "backspace", "⌫" map to same key
Duration control: 200ms default highlight duration
Special key support: Space, return, view switches

Advanced State Management

Event metadata: Timestamps, previous states
Controlled/Uncontrolled: Works both ways
Imperative control: Via ref interface

Event Handling

View Change Events

interface ViewChangeEvent {
  previousView: KeyboardView;
  currentView: KeyboardView;
  timestamp: number;
}

<MobileKeyboard 
  onViewChange={(event) => {
    console.log(`View changed: ${event.previousView} → ${event.currentView}`)
    analytics.track('keyboard_view_change', event)
  }}
/>

Shift State Events

interface ShiftChangeEvent {
  previousState: ShiftState;
  currentState: ShiftState;
  timestamp: number;
}

<MobileKeyboard 
  onShiftStateChange={(event) => {
    if (event.currentState === ShiftState.Locked) {
      console.log('Caps lock activated!')
    }
  }}
/>

Styling Classes

Generated CSS classes for customization:

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

/* Key type classes */
.human-like-mobile-keyboard__key--space
.human-like-mobile-keyboard__key--shift
.human-like-mobile-keyboard__key--backspace
.human-like-mobile-keyboard__key--return
.human-like-mobile-keyboard__key--view-switch
.human-like-mobile-keyboard__key--regular

/* State classes */
.human-like-mobile-keyboard__key--shift-on     /* Shift active */
.human-like-mobile-keyboard__key--shift-locked /* Caps lock */

Mobile Keyboard

On this page