React Keyboard Package

✨React-Keyboard-Package is a customizable virtual keyboard component for React applications, with support for light and dark themes.

Showcase

Here’s how the react-keyboard-package component looks:

Installation

Use npm to install react-keyboard-package:

npm install react-keyboard-package

Usage

Import and use the Keyboard component in your React app:

import React from 'react';
import Keyboard from 'react-keyboard-package';

const App = () => {
  return (
    <div>
      <h1>Virtual Keyboard</h1>
      <Keyboard currentKey="a" theme="dark" />
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | | ------------ | -------- | ----------- | ------------------------------------------------------------- | | theme | string | "light" | Sets the theme of the keyboard. Can be "light" or "dark". | | onInit | function | undefined | Callback function triggered when the keyboard initializes. | | currentKey | string | null | The current key being pressed or active. |

Customization

To customize the keyboard styles, you can override the styles in your project by importing the package's SCSS files and adjusting the variables.

For example:

//Light Theme Variables
$background-color-light: #e0e7ff; // Background color of keyboard
$key-button-bg-light: #ffffff; // Background color of keys
$key-button-hover-bg-light: #e0e7ff; // Hover background color of keys
$key-text-color-light: #000000; // Text color of keys

//Dark Theme Variables
$background-color-dark: #1f1f1f; // Background color of keyboard
$key-button-bg-dark: #333333; // Background color of keys
$key-button-hover-bg-dark: #444444; // Hover background color of keys
$key-text-color-dark: #ffffff; // Text color of keys

//Global Variables
$keyboard-border-radius: 6px; // Border radius of keys
$keyboard-padding: 10px; // Padding inside the keyboard
$keyboard-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); // Box shadow of keyboard

To override these variables, import the SCSS file and redefine the variables in your own project:

@import 'react-keyboard-package/dist/styles/Keyboard.scss';

// Example: Override theme variables
$background-color-light: #f0f8ff;
$key-button-bg-light: #ffffff;
$key-button-hover-bg-light: #b3c7ff;

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Thanks ❤️

License

MIT © License

Author

Made with ❤️ by Ajay Marathe