@autosys/react-base-keyboard

On-Screen Keyboard App

This is an example application featuring a virtual on-screen keyboard, developed using React, TailwindCSS and DaisyUI.

With this application, users can input text using the virtual keyboard, use Caps Lock, Backspace, Space, and Enter keys.

Installation:

Install with npm:

npm install @autosys/react-base-keyboard

Install with yarn:

yarn add @autosys/react-base-keyboard

Install with pnpm:

pnpm add @autosys/react-base-keyboard

Technologies

• React: JavaScript library for building user interfaces.
• TailwindCSS: CSS framework.
• DaisyUI: component library for Tailwind CSS.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Example Usage:

1. Wrap your application with the MuiKeyboardProvider:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { MuiKeyboardProvider } from './context/MuiKeyboardProvider';
import { numbers, englishLetters } from './Keyboards';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <MuiKeyboardProvider
    letters={englishLetters}
    numbers={numbers}
    reverseButton
    betweenButtons={'10px'}
    functionalButtonStyle={{
      backButtonStyle: {
        className:
          'bg-slate-100 hover:bg-indigo-300 uppercase text-indigo-900 btn-outline border-indigo-800/70 shadow-md justify-end w-[150px] mr-2',
      },
      spaceButtonStyle: {
        className:
          'bg-slate-100 hover:bg-indigo-300 btn-outline border-indigo-800/70 text-indigo-900 text-xl m-2 w-full',
      },
      letterButtonStyle: {
        className: 'text-indigo-900 text-xl btn-ghost',
      },
      reverseButtonStyle: {
        className: 'text-indigo-900 text-xl btn-ghost',
      },
      enterButtonStyle: {
        className: 'text-indigo-900 text-xl btn-ghost',
      },
      capsButtonStyle: { className: 'btn-ghost' },
    }}
    numberButtonStyle={{
      className:
        'bg-slate-100 hover:bg-indigo-300 btn-outline border-indigo-800/70 text-indigo-900 text-xl m-1 w-20',
    }}
    textButtonStyle={{
      className:
        'bg-slate-100 hover:bg-indigo-300 btn-outline border-indigo-800/70 shadow-md text-indigo-900 text-xl m-1 w-16',
    }}
  >
    <App />
  </MuiKeyboardProvider>,
);

reportWebVitals();

1. Then yo may use the useMuiKeyboard hook in any another component to access the input value and setter from the context.

// App.tsx
import React from 'react';
import { useMuiKeyboard } from './context/MuiKeyboardProvider';

const App = () => {
  const { inputValue, keyBoard, keyboardFeature } = useMuiKeyboard();
  return (
    <div>
      <input
        type="text"
        className="input input-bordered input-primary w-full max-w-xs"
        value={inputValue}
      />
      {keyBoard}
      <button className="btn" onClick={() => keyboardFeature({ openKeyboard: true })}>
        {'open'}
      </button>
    </div>
  );
};

export default App;

• {keyBoard} is the keyboard itself
• 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 })}
• To open the keyboard, use onClick={() => keyboardFeature({ openKeyboard: true })}, to close onClick={() => keyboardFeature({ openKeyboard: false })}

Properties

Name	Type	Description
numbers*	string[]	Array of number and special characters for keyboard buttons.
letters	string[]	Array of letters characters for keyboard buttons.
reverseButton*	boolean	Text reset button.
betweenButtons*	string | number	Distance between buttons.
alwaysOpen*	boolean	If you want the keyboard to always be open, set true. Default false
functionalButtonStyle	object	Object containing styles for functional buttons.
.backButtonStyle*	object	Styles for the back button including className.
..className	string	ClassName for the back button.
.spaceButtonStyle*	object	Styles for space button including className.
..className	string	ClassName for the space button.
.letterButtonStyle*	object	Styles for letter buttons including className.
..className	string	ClassName for the letter buttons.
.reverseButtonStyle*	object	Styles for reverse button including className.
..className	string	ClassName for the reverse button.
.enterButtonStyle*	object	Styles for enter button including className.
..className	string	ClassName for the enter button.
.capsButtonStyle*	object	Styles for caps button including className.
..className	string	ClassName for the caps button.
numberButtonStyle*	object	Styles for number buttons including className.
.className	string	ClassName for the number buttons.
textButtonStyle	object	Styles for text buttons including className.
.className	string	ClassName for the text buttons.

Props marked with * are required.