@ignatiusmms/smart-keyboard

A modern, customizable React virtual keyboard with built-in smart suggestions, quick actions, responsive layouts, and beautiful glassmorphism UI.

Features

• Beautiful Glassmorphism Design
• Built with React + TypeScript
• Fully Responsive
• Light & Dark Theme Support
• Smart Word Suggestions
• Copy Text
• Clear Keyboard
• Attach Files
• Camera Support
• Gallery Picker
• Location Button
• Calendar
• Emoji Picker
• Voice Input
• GIF Support
• Print
• Share
• Download
• Multiple Keyboard Layouts
• Easy Customization
• Plug-and-Play

---

Installation

npm install @ignatiusmms/smart-keyboard

or

yarn add @ignatiusmms/smart-keyboard

---

Basic Usage

import SmartKeyboard from "@ignatiusmms/smart-keyboard";

function App() {
  return <SmartKeyboard />;
}

export default App;

---

Example

import SmartKeyboard from "@ignatiusmms/smart-keyboard";

export default function Example() {
  return (
    <div style={{ padding: 30 }}>
      <SmartKeyboard />
    </div>
  );
}

---

Props

Prop	Type	Default	Description
value	string	""	Keyboard input value
onChange	function	required	Returns updated text
placeholder	string	"Type here..."	Input placeholder
suggestions	string[]	[]	Word suggestions
theme	"light" | "dark"	dark	Keyboard theme
layout	string	default	Keyboard layout
disabled	boolean	false	Disable keyboard
maxLength	number	undefined	Maximum characters

---

Events

<SmartKeyboard
  value={text}
  onChange={setText}
  onEnter={() => console.log("Enter")}
  onClear={() => console.log("Clear")}
  onCopy={() => console.log("Copied")}
/>

---

Quick Action Buttons

The keyboard includes several built-in quick action buttons.

• Attach
• Camera
• Gallery
• Calculator
• Voice
• Location
• Calendar
• Emoji
• GIF
• Scan
• Print
• Share
• Download

Each button can trigger custom callbacks.

Example:

<SmartKeyboard
  onAttach={handleAttach}
  onCamera={openCamera}
  onGallery={openGallery}
  onVoice={startVoice}
/>

---

Themes

<SmartKeyboard theme="dark" />

<SmartKeyboard theme="light" />

---

Suggestions

const suggestions = ["React", "TypeScript", "Keyboard", "Hello", "World"];

<SmartKeyboard suggestions={suggestions} />;

---

Responsive

Works on

• Desktop
• Tablet
• Mobile
• Touch Screens
• Smart Displays

---

Technologies

• React
• TypeScript
• CSS
• Hooks
• Functional Components

---

Browser Support

• Chrome
• Edge
• Firefox
• Safari

---

Accessibility

• Keyboard Navigation
• Responsive Layout
• Focus Support
• Screen Reader Friendly

---

Roadmap

• AI Suggestions
• Multiple Languages
• Swipe Typing
• Speech-to-Text
• Predictive Text
• Custom Themes
• RTL Support
• Plugin System

---

Contributing

Contributions are welcome!

1. Fork the repository
2. Create a new branch

git checkout -b feature/new-feature

1. Commit changes

git commit -m "Added new feature"

1. Push

git push origin feature/new-feature

1. Open a Pull Request

---

License

MIT License

---

Author

npm: https://www.npmjs.com/package/@ignatiusmms/smart-keyboard

---

If you use this package, Star the repository and share your feedback!

If get error use this

import SmartKeyboard from "@ignatiusmms/smart-keyboard";

function App() { // @ts-expect-error: missing type definitions for SmartKeyboard return ; }

export default App;