Examples

Real-world usage patterns and common scenarios

🌍 Multi-Language Keyboard

Support multiple languages with custom keyboard layouts and built-in language switcher.

Current language: 🇺🇸 English

const languages = {
  en: {
    label: '🇺🇸 English',
    letters: [['q', 'w', 'e', ...], ['a', 's', 'd', ...], ...]
  },
  es: {
    label: '🇪🇸 Español',
    letters: [['q', 'w', 'e', ...], ['a', 's', 'd', ..., 'ñ'], ...]
  },
  // ... more languages
};

<VirtualKeyboard
  languages={languages}
  currentLanguage={currentLang}
  onLanguageChange={setCurrentLang}
  showLanguageSwitcher={true}
  {...props}
/>

✅ Form Validation

Use custom validation to restrict valid input values.

const validateEmail = (value: string) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  setError(emailRegex.test(value) ? '' : 'Invalid');
  return true;
};

<VirtualKeyboard
  inputType="email"
  validate={validateEmail}
  {...props}
/>

🏷️ Custom Key Labels

Customize key labels for specific use cases (e.g., "Submit" instead of "Enter").

<VirtualKeyboard
  {...props}
  keyLabels={{
    enter: 'Submit',
    space: 'Space Bar',
    backspace: 'Delete'
  }}
/>

👁️ Hiding Specific Keys

Hide keys that aren't needed for your use case.

<VirtualKeyboard
  {...props}
  hiddenKeys={['capslock', '@', '#']}
/>

🎨 Custom Theme

Create a custom theme to match your app's design.

const neonTheme = {
  backgroundColor: '#0a0a0a',
  keyColor: '#1a1a2e',
  keyTextColor: '#00ff9f',
  keyActiveColor: '#ff00ff',
  keyHoverColor: '#16213e',
  activeStateColor: '#00ff9f',
  keyBorderRadius: '8px',
  keyFontSize: '18px',
  keyHeight: '50px'
};

<VirtualKeyboard theme={neonTheme} {...props} />

⌨️ Disable Hardware Keyboard Sync

Prevent virtual keyboard from syncing with physical keyboard.

<VirtualKeyboard
  syncWithHardwareKeyboard={false}
  {...props}
/>

⏱️ Adjust Continuous Press Timing

Make backspace repeat faster or slower when held down.

<VirtualKeyboard
  continuousPressConfig={{
    initialDelay: 300,  // Start repeating after 300ms
    interval: 30        // Repeat every 30ms
  }}
  {...props}
/>