Retorik Virtual Keyboard

A customizable virtual keyboard component for React applications, built on top of react-simple-keyboard. It automatically attaches to any focused input or textarea in the DOM, including elements inside Shadow Roots.

Features

• 🌍 Multi-language support via simple-keyboard-layouts
• 🖱️ Draggable keyboard
• 👆 Tactile device detection
• 🔲 Shadow DOM support (e.g. Retorik Framework)
• 🎯 Auto-attach to input and textarea elements
• 📦 Zero CSS import required (styles are injected automatically)

Installation

npm install @davi-ai/virtual-keyboard

Usage

import { VirtualKeyboard } from "@davi-ai/virtual-keyboard";

const App = () => {
  return (
    <>
      <input type="text" placeholder="Click to open keyboard" />
      <VirtualKeyboard locale="fr-FR" />
    </>
  );
};

Props

| Prop | Type | Default | Description | |---|---|---|---| | locale | string | "fr-FR" | Locale used for keyboard layout and translations (e.g. "en-US", "fr-FR") | | defaultPosition | { x?: number, y?: number } | Auto | Initial position of the keyboard on screen | | onlyWithRetorikFramework | boolean | false | If true, only observes inputs inside the Retorik Framework Shadow DOM | | observeShadowRoots | boolean | false | If true, observes all Shadow Roots found in the DOM | | onlyOnTactileDevices | boolean | false | If true, the keyboard is only displayed on tactile devices | | display | object | Auto (from locale) | Overrides the default labels for special keys. See below for details. |

display prop

Allows you to customize the labels shown on special keys. If not provided, labels are automatically resolved from the locale prop.

<VirtualKeyboard
  locale="fr-FR"
  display={{
    '{bksp}': '⌫',
    '{enter}': 'Entrée',
    '{shift}': 'Maj',
    '{lock}': 'Verr. Maj',
    '{tab}': 'Tab',
    '{space}': 'Espace',
  }}
/>

| Key | Description | |---|---| | {bksp} | Backspace key | | {enter} | Enter / Return key | | {shift} | Shift key | | {lock} | Caps Lock key | | {tab} | Tab key | | {space} | Space bar |

Supported Input Types

The keyboard automatically attaches to the following input types:

text, search, email, url, tel, password, number

Supported Locales

The component uses simple-keyboard-layouts for keyboard layouts. Many locales are supported, including but not limited to:

• fr-FR — French
• en-US — English
• de-DE — German
• es-ES — Spanish
• it-IT — Italian

The full list is : "ar-AE", "ar-EG", "ar-SA", "ca-ES", "cs-CZ", "da-DK", "de-AT", "de-CH", "de-DE", "en-CA", "en-GB", "en-HK", "en-IE", "en-IN", "en-US", "es-ES", "es-MX", "fi-FI", "fr-BE", "fr-CA", "fr-CH", "fr-FR", "hi-IN", "hu-HU", "id-ID", "it-IT", "ja-JP", "ko-KR", "nb-NO", "nl-BE", "nl-NL", "pl-PL", "pt-BR", "pt-PT", "ru-RU", "sv-SE", "th-TH", "tr-TR", "zh-CN", "zh-HK", "zh-TW"

Dependencies

• react-simple-keyboard
• simple-keyboard-layouts

License

MIT