React Keyboard Base Components
Installation
Step 1:
Place these scripts at the top of your HTML's head
:
<script type="module" src="https://unpkg.com/@register-ui/keyboard-base@latest/dist/register-keyboard/register-keyboard.esm.js"></script>
<script nomodule src="https://unpkg.com/@register-ui/keyboard-base@latest/dist/register-keyboard/register-keyboard.js"></script>
Step 2
Install the React types and JSX bindings for intellisense and React-specific syntax:
npm i @register-ui/keyboard-base-react
or
yarn add @register-ui/keyboard-base-react
Step 3
Finished! Add components to your files like so:
import { Keyboard, KeyboardButton } from "@register-ui/keyboard-base-react";
Example:
import * as React from "react";
import "./styles.scss";
import { Keyboard, KeyboardButton } from "@register-ui/keyboard-base-react";
export default function App() {
return (
<input className="global-keyboard" name="test-input" />
<div style={{padding: 24, background: "#f1f1f1"}}>
<input className="local-keyboard" name="test-input-2" />
<br />
{/* Isolated Keyboard (only handles inputs within this parent) */}
<Keyboard global={false}>
<KeyboardButton buttonName="A" pressAction="add" addValue="A">A</KeyboardButton>
</Keyboard>
</div>
{/* Global Keyboard (handles inputs within entire app, besides ones controlled by local keyboards) */}
<Keyboard global={true}>
<KeyboardButton buttonName="A" pressAction="add" addValue="A">A</KeyboardButton>
</Keyboard>
);
}