Skip to content

Commit 7df6dab

Browse files
indianmodassirindianmodassir
committed
published first release
1 parent 3522325 commit 7df6dab

11 files changed

Lines changed: 933 additions & 2 deletions

File tree

‎.editorconfig‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
end_of_line = lf
6+
indent_size = 2
7+
indent_style = space
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false
13+
14+
[*.{yml,yaml}]
15+
indent_size = 2
16+
17+
[docker-compose.yml]
18+
indent_size = 2

‎.github/workflows/npm-publish.yml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
name: Publish Package to npm
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
permissions:
9+
contents: read
10+
id-token: write
11+
12+
jobs:
13+
publish:
14+
runs-on: ubuntu-latest
15+
16+
steps:
17+
- name: Checkout repository
18+
uses: actions/checkout@v5
19+
20+
- name: Setup Node.js
21+
uses: actions/setup-node@v4
22+
with:
23+
node-version: '20.x'
24+
registry-url: 'https://registry.npmjs.org'
25+
26+
- name: Install dependencies
27+
run: npm ci
28+
29+
- name: Build package
30+
run: npm run build
31+
32+
- name: Publish to npm
33+
run: npm publish --provenance --access public
34+
env:
35+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.gitignore‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
node_modules
2+
vendor
3+
.DS_STORE
4+
.vscode
5+
.fleet
6+
.zed
7+
.idea
8+
*.iml
9+
*.swp
10+
*.swo
11+
*.log*
12+
.env*

‎.mailmap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Indian Modassir <indianmodassir@gmail.com>

‎.npmignore‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
node_modules
2+
vendor
3+
test
4+
tests
5+
doc
6+
package-lock.json
7+
CHANGELOG.md
8+
CODE_OF_CONDUCT.md
9+
CONTRIBUTING.md
10+
SECURITY.md
11+
.DS_STORE
12+
.editorconfig
13+
.vscode
14+
.fleet
15+
.zed
16+
.idea
17+
.github
18+
.gitignore
19+
.gitattributes
20+
.CHANGELOG.md
21+
.mailmap
22+
*.iml
23+
*.swp
24+
*.swo
25+
*.log*
26+
.env*

‎AUTHORS‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Indian Modassir <indianmodassir@gmail.com>

‎README.md‎

Lines changed: 175 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,175 @@
1-
# hi-vkbd
2-
A lightweight Hindi virtual keyboard UI for web applications.
1+
vkbd
2+
======
3+
4+
A lightweight Hindi/English virtual keyboard UI for web applications.
5+
6+
[![npm version](https://img.shields.io/npm/v/vkbd?logo=npm)](https://www.npmjs.com/package/vkbd)
7+
![license](https://img.shields.io/github/license/jsvibe/vkbd?color=blue)
8+
[![downloads month](https://img.shields.io/npm/dm/vkbd)](https://www.npmjs.com/package/vkbd)
9+
[![jsDelivr Hits](https://img.shields.io/jsdelivr/npm/hm/vkbd?logo=jsdelivr)](https://www.jsdelivr.com/package/npm/vkbd)
10+
[![author](https://img.shields.io/badge/Author-Modassir-blue)](https://github.com/indianmodassir)
11+
[![Publish Package to npm](https://github.com/jsvibe/vkbd/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/jsvibe/vkbd/actions/workflows/npm-publish.yml)
12+
13+
14+
## ✨ Features
15+
- 🖊️ Hindi + English typing support
16+
- 🎨 Light / Dark / System theme support with variants
17+
- 🖥️ On-screen draggable keyboard (movable dialog)
18+
- 🔀 Language switch (EN ⇄ HI)
19+
- ⌨️ Special keys (Shift, Caps, Alt, Backspace, Enter, etc.)
20+
- 📦 Zero dependency, pure JavaScript
21+
22+
Installation
23+
------------
24+
25+
```bash
26+
npm install vkbd
27+
```
28+
29+
or via yarn:
30+
31+
```bash
32+
yarn add vkbd
33+
```
34+
35+
Including vkbd
36+
--------------
37+
38+
Below are some of the most common ways to include vkbd.
39+
40+
### Browser
41+
42+
**CDN Link**
43+
44+
```html
45+
<script src="https://cdn.jsdelivr.net/npm/printfy@1.0.0/lib/vkbd.min.js"></script>
46+
```
47+
48+
You can add the script manually to your project:
49+
50+
```html
51+
<script src="vkbd.js"></script>
52+
```
53+
54+
Webpack / Browserify / Babel
55+
----------------------------
56+
57+
There are several ways to use [Webpack](https://webpack.js.org/), [Browserify](http://browserify.org/) or [Babel](https://babeljs.io/). For more information on using these tools, please refer to the corresponding project's documentation. In the script, including printfy will usually look like this:
58+
59+
```js
60+
import vkbd from 'vkbd';
61+
```
62+
63+
API Usage
64+
---------
65+
66+
### Usage in React
67+
68+
```js
69+
import 'vkbd.css';
70+
import vkbd from 'vkbd';
71+
72+
function App() {
73+
74+
const kbdUI = new vkbd({
75+
lang: 'hi', // 'hi' or 'en'
76+
theme: 'dark', // e.g, 'light', 'dark', 'system'
77+
themeVariant: 1, // 1-3
78+
});
79+
80+
// OR
81+
// const kbdUI = new vkbd();
82+
// kbdUI.open(inputElement|selector);
83+
// kbdUI.close();
84+
85+
return (
86+
<div>
87+
<div>
88+
<input type="text" placeholder="Firstname" id="firstname" />
89+
<span onClick={() => kbdUI.open("#firstname")}>⌨️</span>
90+
</div>
91+
<div>
92+
<input type="text" placeholder="Surname" id="surname" />
93+
<span onClick={kbdUI.open("#surname")}>⌨️</span>
94+
</div>
95+
</div>
96+
);
97+
}
98+
99+
export default App;
100+
```
101+
102+
![Output1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hr2aw0d4n9ex14nh85k2.gif)
103+
104+
### Usage in Browser
105+
106+
```html
107+
<!DOCTYPE html>
108+
<html lang="en">
109+
<head>
110+
<meta charset="UTF-8">
111+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
112+
<title>Virtual Keyboard UI</title>
113+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/printfy@1.0.0/lib/vkbd.min.css">
114+
<script src="https://cdn.jsdelivr.net/npm/printfy@1.0.0/lib/vkbd.min.js"></script>
115+
116+
<!-- Keboard UI Configuration -->
117+
<script>
118+
const kbdUI = new vkbd({
119+
lang: 'hi', // 'hi' or 'en'
120+
theme: 'light', // e.g, 'light', 'dark', 'system'
121+
themeVariant: 1, // 1-3
122+
});
123+
124+
// OR
125+
// const kbdUI = new vkbd();
126+
// kbdUI.open(inputElement|selector);
127+
// kbdUI.close();
128+
</script>
129+
</head>
130+
<body>
131+
<div>
132+
<div>
133+
<input type="text" placeholder="Firstname" id="firatname" />
134+
<span onclick="kbdUI.open('#firatname')">⌨️</span>
135+
</div>
136+
<div>
137+
<input type="text" placeholder="Surname" id="surname" />
138+
<span onclick="kbdUI.open('#surname')">⌨️</span>
139+
</div>
140+
</div>
141+
</body>
142+
</html>
143+
```
144+
145+
![Output2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug19xle84vdeuw0jke8g.gif)
146+
147+
Configuration Options
148+
---------------------
149+
150+
That means the user can set these options (such as `lang`, `theme`, `themeVariant`) to control the keyboard’s language, theme, and style.
151+
152+
|Option|Type|Default|Description|
153+
|:-----|:---|:------|:----------|
154+
|lang|string|'hi'|Initial language (`hi` or `en`)|
155+
|theme|string|'light'|Theme: `light`, `dark`, `system`
156+
|themeVariant|number|1|Theme style variant (1–3)
157+
158+
📚 API
159+
------
160+
161+
- `vkbd(options)` returns a keyboard instance
162+
- `keyboard.open(elem)` open keyboard for given input/textarea
163+
- `keyboard.close()` close keyboard
164+
165+
Contributing
166+
------------
167+
168+
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
169+
170+
License
171+
-------
172+
173+
Licensed Under [MIT](LICENSE)
174+
175+
Copyright (c) 2025 [Indian Modassir](https://github.com/indianmodassir)

0 commit comments

Comments
 (0)