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
:
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
useMuiKeyboard
hook in any another component to access the input value and setter from the context.
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 })}