On-Screen Keyboard App
This is an example application featuring a virtual on-screen keyboard, developed using React and Material-UI (MUI).
Read this in other languages: Русский
With this application, users can input text using the virtual keyboard, select the keyboard layout language (Russian or English), use Caps Lock, Backspace, Space, and Enter keys.
Installation:
Install with npm:
npm install @autosys/react-mui-keyboard
Install with yarn:
yarn add @autosys/react-mui-keyboard
Usage
-
To input text, click on the virtual keyboard buttons or use the Caps Lock, Backspace, Space, and Enter keys.
-
To change the keyboard layout language, click on the "RU" button (Russian layout) or "EN" button (English layout).
Technologies
- React: JavaScript library for building user interfaces.
- Material-UI (MUI): Component library for creating stylish user interfaces.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Example Usage:
import React, { useState } from 'react';
import { TextField } from '@mui/material';
import { MuiKeyboard } from '@autosys/react-mui-keyboard';
import { russianButtons, englishButtons, numbers } from 'path_to_your_button_data';
const App = () => {
const [checked, setChecked] = useState(false);
const [inputValue, setInputValue] = useState<string>('');
const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(event.target.value);
};
const handleChange = () => {
setChecked((prev) => !prev);
};
return (
<MuiKeyboard
textField={
<TextField
onChange={handleUrlChange}
onClick={handleChange}
value={inputValue}
fullWidth
multiline
/>
}
slide
direction="up"
checked={checked}
setInputValue={setInputValue}
numbers={numbers}
firstLanguage={russianButtons}
secondLanguage={englishButtons}
secondLangLabel="EN"
firstLangLabel="RU"
keyboardWidth={'900px'}
buttonSize="medium"
labelLangButton
reverseButton
sx={{ display: 'flex' }}
/>
);
};
export default App;Properties
| Name | Type | Description |
|---|---|---|
textField |
JSX.Element |
Text input field component. |
slide |
boolean |
A flag indicating whether the keyboard should appear with a Slide animation. By default, true. |
direction |
SlideProps <"left" | "right" | "up" | "down"> |
Slide animation direction (used if slide is set to true). By default, up. |
checked |
boolean |
Keyboard visibility state flag. |
setInputValue |
React.Dispatch<React.SetStateAction<string>> |
Callback to set the input field's value. |
numbers |
string[] |
Array of characters for keyboard number buttons. |
firstLanguage* |
string[] |
Array of characters for keyboard buttons in the first language. |
secondLanguage |
string[] |
Array of characters for keyboard buttons in the second language. |
secondLangLabel |
string |
Label for the second language. |
firstLangLabel |
string |
Label for the first language. |
keyboardWidth |
string | number |
Keyboard width. |
buttonSize |
ButtonProps <"small" | "medium" | "large"> |
Button size. |
labelLangButton |
boolean |
Language switch button. |
reverseButton |
boolean |
Text reset button. |
singlyBack |
boolean |
If true, the backspace button is separate from the block with numbers. |
labelLetterButton |
boolean |
If true, a button is added to switch between the layout with letters and numbers. |
betweenButtons |
string | number |
Distance between buttons. |
numbersColumns |
string |
The number of columns for numeric keypad when it is separate from letters. By default, 5. |
numbersRows |
string |
The number of rows for numeric keypad when it is separate from letters. By default, 3. |
allKeyboardStyle |
SxProps |
The sx prop is a shortcut for defining custom styles that has access to the theme. |
timeout |
SlideProps <number | { appear?: number, enter?: number, exit?: number }> |
The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
Props marked with * are required.
Usage without TextField and with Context
If you want to use the MuiKeyboard component without a built-in TextField and manage the input value using context, follow these steps:
- Wrap your application with the
MuiKeyboardProvider:
// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { MuiKeyboardProvider } from '@autosys/react-mui-keyboard';
import { russianButtons } from '@autosys/react-mui-keyboard';
ReactDOM.render(
<MuiKeyboardProvider
firstLanguage={russianButtons}
sx={{ display: 'flex', justifyContent: 'center', mt: 50 }}
keyboardWidth={'900px'}
>
<App />
</MuiKeyboardProvider>,
document.getElementById('root'),
);- Then yo may use the
useMuiKeyboardhook in any another component to access the input value and setter from the context.
// App.tsx
import React from 'react';
import { TextField } from '@mui/material';
import { useMuiKeyboard } from '@autosys/react-mui-keyboard';
const App = () => {
const { inputValue, keyboardFeature } = useMuiKeyboard();
return (
<TextField
value={inputValue}
onClick={() => keyboardFeature({ slideEffect: true })}
label="Click!"
>
Hello
</TextField>
);
};
export default App;If you want your component (for example, a button) to only be able to close the keyboard, use onClick={() => keyboardFeature({ slideEffect: false })}
If you want to reset the inputValue, but don't want to do it with a button on the keyboard, you can use any other button with onClick={() => keyboardFeature({ resetText: true })}