{"_id":"@autosys/react-base-keyboard","_rev":"2-c5e8e422c631c00c40951ada5c09639f","name":"@autosys/react-base-keyboard","dist-tags":{"latest":"2.0.1"},"versions":{"2.0.0":{"name":"@autosys/react-base-keyboard","version":"2.0.0","repository":{"type":"git","url":"git+https://github.com/autonomous-systems/react-base-keyboard.git"},"license":"MIT","author":{"name":"KirillRamzaev","email":"k.ramzaev@auto-sys.su","url":"https://github.com/autonomous-systems"},"peerDependencies":{"@types/react":"^17.0.0 || ^18.0.0","@types/react-dom":"^17.0.0 || ^18.0.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"keywords":["react","typescript","tailwind","material-base-keyboard","base-keyboard","daisyui"],"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@testing-library/jest-dom":"5.11.9","@testing-library/react":"14.0.0","@types/jest":"^29.5.3","@types/react":"18.2.21","@types/react-dom":"18.2.7","daisyui":"^4.6.1","functions-have-names":"^1.2.3","jest":"29.7.0","jest-canvas-mock":"^2.5.2","jest-environment-jsdom":"29.7.0","prettier":"^3.0.3","react":"18.2.0","react-dom":"18.2.0","tailwindcss":"^3.4.1","ts-jest":"^29.1.1","tslib":"^2.6.2","typescript":"5.2.2","web-vitals":"3.4.0"},"main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/esm/index.d.ts","scripts":{"clean":"rm -rf dist/","build":"pnpm clean && pnpm build:esm && pnpm build:cjs","build:esm":"tsc","build:cjs":"tsc --module commonjs --outDir dist/cjs","test":"jest"},"description":"This is an example application featuring a virtual on-screen keyboard, developed using React, TailwindCSS and DaisyUI.","bugs":{"url":"https://github.com/autonomous-systems/react-base-keyboard/issues"},"homepage":"https://github.com/autonomous-systems/react-base-keyboard#readme","_id":"@autosys/react-base-keyboard@2.0.0","_integrity":"sha512-loj4EhWU9LPmw2vf1uU+RQIg6TOqG9tRY5mbfltDCIHeOyVKCH4NMC4KisyHucyZCVig88NygUmKNfPzxx7bhg==","_resolved":"/tmp/85ef6b3bd3c54da09028af1189aa42df/autosys-react-base-keyboard-2.0.0.tgz","_from":"file:autosys-react-base-keyboard-2.0.0.tgz","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-loj4EhWU9LPmw2vf1uU+RQIg6TOqG9tRY5mbfltDCIHeOyVKCH4NMC4KisyHucyZCVig88NygUmKNfPzxx7bhg==","shasum":"a9998ce493f1e32013c7fe262b7a25702e16e5e5","tarball":"https://registry.npmjs.org/@autosys/react-base-keyboard/-/react-base-keyboard-2.0.0.tgz","fileCount":131,"unpackedSize":72127,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbjMUOvQhcCnmCYEtYDjkBUd6GBNrRf5KGvqw2+WUoYgIhAIOIuviB+F6c8HFifkhtbKw5RbtBK4ssDUGt+w77ZLLq"}]},"_npmUser":{"name":"ramziij","email":"k.ramzaev@auto-sys.su"},"directories":{},"maintainers":[{"name":"ramziij","email":"k.ramzaev@auto-sys.su"},{"name":"auto-sys","email":"a.gotovcev@auto-sys.su"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-base-keyboard_2.0.0_1710427968966_0.3798116995183305"},"_hasShrinkwrap":false,"deprecated":"This version contains errors and is outdated. Install using @autosys/react-base-keyboard@2.0.1 instead."},"2.0.1":{"name":"@autosys/react-base-keyboard","version":"2.0.1","repository":{"type":"git","url":"git+https://github.com/autonomous-systems/react-base-keyboard.git"},"license":"MIT","author":{"name":"KirillRamzaev","email":"k.ramzaev@auto-sys.su","url":"https://github.com/autonomous-systems"},"peerDependencies":{"@types/react":"^17.0.0 || ^18.0.0","@types/react-dom":"^17.0.0 || ^18.0.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"keywords":["react","typescript","tailwind","material-base-keyboard","base-keyboard","daisyui"],"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@testing-library/jest-dom":"5.11.9","@testing-library/react":"14.0.0","@types/jest":"^29.5.3","@types/react":"18.2.21","@types/react-dom":"18.2.7","daisyui":"^4.6.1","functions-have-names":"^1.2.3","jest":"29.7.0","jest-canvas-mock":"^2.5.2","jest-environment-jsdom":"29.7.0","prettier":"^3.0.3","react":"18.2.0","react-dom":"18.2.0","tailwindcss":"^3.4.1","ts-jest":"^29.1.1","tslib":"^2.6.2","typescript":"5.2.2","web-vitals":"3.4.0"},"main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/esm/index.d.ts","scripts":{"clean":"rm -rf dist/","build":"pnpm clean && pnpm build:esm && pnpm build:cjs","build:esm":"tsc","build:cjs":"tsc --module commonjs --outDir dist/cjs","test":"jest"},"description":"This is an example application featuring a virtual on-screen keyboard, developed using React, TailwindCSS and DaisyUI.","bugs":{"url":"https://github.com/autonomous-systems/react-base-keyboard/issues"},"homepage":"https://github.com/autonomous-systems/react-base-keyboard#readme","_id":"@autosys/react-base-keyboard@2.0.1","_integrity":"sha512-keOdbw5cg8oMP1vk8HENF8eYiml6Dp9pmi7ZO/34idUZKwA0Sxk3goPVVtJI7zC2iJsTHVeJYWljk/WA9eopKw==","_resolved":"/tmp/e504275d5f79f9a3b7ed440e72f7c61b/autosys-react-base-keyboard-2.0.1.tgz","_from":"file:autosys-react-base-keyboard-2.0.1.tgz","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-keOdbw5cg8oMP1vk8HENF8eYiml6Dp9pmi7ZO/34idUZKwA0Sxk3goPVVtJI7zC2iJsTHVeJYWljk/WA9eopKw==","shasum":"74a41f0efc6166537b9d7fc7085d0898d2e0b207","tarball":"https://registry.npmjs.org/@autosys/react-base-keyboard/-/react-base-keyboard-2.0.1.tgz","fileCount":131,"unpackedSize":72587,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7SMcPs9U4+QOdt4UEXuQFVdHHHwr8+ovuplGCZ6vWDAiAxbU/Tx46460fTU63CUEH5YPzvweTFFDESBaUcgoWiiw=="}]},"_npmUser":{"name":"ramziij","email":"k.ramzaev@auto-sys.su"},"directories":{},"maintainers":[{"name":"ramziij","email":"k.ramzaev@auto-sys.su"},{"name":"auto-sys","email":"a.gotovcev@auto-sys.su"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-base-keyboard_2.0.1_1710508511493_0.8793849764914743"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-14T14:52:48.900Z","2.0.0":"2024-03-14T14:52:49.125Z","modified":"2024-03-15T13:19:37.288Z","2.0.1":"2024-03-15T13:15:11.721Z"},"maintainers":[{"name":"auto-sys","email":"a.gotovcev@auto-sys.su"},{"name":"ramziij","email":"k.ramzaev@auto-sys.su"}],"description":"This is an example application featuring a virtual on-screen keyboard, developed using React, TailwindCSS and DaisyUI.","homepage":"https://github.com/autonomous-systems/react-base-keyboard#readme","keywords":["react","typescript","tailwind","material-base-keyboard","base-keyboard","daisyui"],"repository":{"type":"git","url":"git+https://github.com/autonomous-systems/react-base-keyboard.git"},"author":{"name":"KirillRamzaev","email":"k.ramzaev@auto-sys.su","url":"https://github.com/autonomous-systems"},"bugs":{"url":"https://github.com/autonomous-systems/react-base-keyboard/issues"},"license":"MIT","readme":"# On-Screen Keyboard App\n\nThis is an example application featuring a virtual on-screen keyboard, developed using React, TailwindCSS and DaisyUI.\n\n![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)\n![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)\n![DaisyUI](https://img.shields.io/badge/daisyui-5A0EF8?style=for-the-badge&logo=daisyui&logoColor=white)\n\n![PNPM](https://img.shields.io/badge/pnpm-%234a4a4a.svg?style=for-the-badge&logo=pnpm&logoColor=f69220)\n[![Licence](https://img.shields.io/github/license/Ileriayo/markdown-badges?style=for-the-badge)](./LICENSE)\n\n![Screenshot](./screenshots/englishLetters.jpg)\n\n<!-- <hr> -->\n\nWith this application, users can input text using the virtual keyboard, use Caps Lock, Backspace, Space, and Enter keys.\n\n## Installation:\n\n[![NPM](https://nodei.co/npm/@autosys/react-mui-keyboard.png?downloads=true&stars=true)](https://www.npmjs.com/package/@autosys/react-mui-keyboard)\n\nInstall with npm:\n\n`npm install @autosys/react-base-keyboard`\n\nInstall with yarn:\n\n`yarn add @autosys/react-base-keyboard`\n\nInstall with pnpm:\n\n`pnpm add @autosys/react-base-keyboard`\n\n## Technologies\n\n- React: JavaScript library for building user interfaces.\n- TailwindCSS: CSS framework.\n- DaisyUI: component library for Tailwind CSS.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Example Usage:\n\n1. Wrap your application with the `MuiKeyboardProvider`:\n\n```tsx\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\nimport { MuiKeyboardProvider } from './context/MuiKeyboardProvider';\nimport { numbers, englishLetters } from './Keyboards';\nimport './index.css';\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(\n  <MuiKeyboardProvider\n    letters={englishLetters}\n    numbers={numbers}\n    reverseButton\n    betweenButtons={'10px'}\n    functionalButtonStyle={{\n      backButtonStyle: {\n        className:\n          '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',\n      },\n      spaceButtonStyle: {\n        className:\n          'bg-slate-100 hover:bg-indigo-300 btn-outline border-indigo-800/70 text-indigo-900 text-xl m-2 w-full',\n      },\n      letterButtonStyle: {\n        className: 'text-indigo-900 text-xl btn-ghost',\n      },\n      reverseButtonStyle: {\n        className: 'text-indigo-900 text-xl btn-ghost',\n      },\n      enterButtonStyle: {\n        className: 'text-indigo-900 text-xl btn-ghost',\n      },\n      capsButtonStyle: { className: 'btn-ghost' },\n    }}\n    numberButtonStyle={{\n      className:\n        'bg-slate-100 hover:bg-indigo-300 btn-outline border-indigo-800/70 text-indigo-900 text-xl m-1 w-20',\n    }}\n    textButtonStyle={{\n      className:\n        'bg-slate-100 hover:bg-indigo-300 btn-outline border-indigo-800/70 shadow-md text-indigo-900 text-xl m-1 w-16',\n    }}\n  >\n    <App />\n  </MuiKeyboardProvider>,\n);\n\nreportWebVitals();\n```\n\n2. Then yo may use the `useMuiKeyboard` hook in any another component to access the input value and setter from the context.\n\n```tsx\n// App.tsx\nimport React from 'react';\nimport { useMuiKeyboard } from './context/MuiKeyboardProvider';\n\nconst App = () => {\n  const { inputValue, keyBoard, keyboardFeature } = useMuiKeyboard();\n  return (\n    <div>\n      <input\n        type=\"text\"\n        className=\"input input-bordered input-primary w-full max-w-xs\"\n        value={inputValue}\n      />\n      {keyBoard}\n      <button className=\"btn\" onClick={() => keyboardFeature({ openKeyboard: true })}>\n        {'open'}\n      </button>\n    </div>\n  );\n};\n\nexport default App;\n```\n\n- `{keyBoard}` is the keyboard itself\n- 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 })}`\n- To open the keyboard, use `onClick={() => keyboardFeature({ openKeyboard: true })}`, to close `onClick={() => keyboardFeature({ openKeyboard: false })}`\n\n### Properties\n\n| Name                    | Type               | Description                                                             |\n| ----------------------- | ------------------ | ----------------------------------------------------------------------- |\n| `numbers*`              | `string[]`         | Array of number and special characters for keyboard buttons.            |\n| `letters`               | `string[]`         | Array of letters characters for keyboard buttons.                       |\n| `reverseButton*`        | `boolean`          | Text reset button.                                                      |\n| `betweenButtons*`       | `string \\| number` | Distance between buttons.                                               |\n| `alwaysOpen*`           | `boolean`          | If you want the keyboard to always be open, set `true`. Default `false` |\n| `functionalButtonStyle` | `object`           | Object containing styles for functional buttons.                        |\n| `.backButtonStyle*`     | `object`           | Styles for the back button including className.                         |\n| `..className`           | `string`           | ClassName for the back button.                                          |\n| `.spaceButtonStyle*`    | `object`           | Styles for space button including className.                            |\n| `..className`           | `string`           | ClassName for the space button.                                         |\n| `.letterButtonStyle*`   | `object`           | Styles for letter buttons including className.                          |\n| `..className`           | `string`           | ClassName for the letter buttons.                                       |\n| `.reverseButtonStyle*`  | `object`           | Styles for reverse button including className.                          |\n| `..className`           | `string`           | ClassName for the reverse button.                                       |\n| `.enterButtonStyle*`    | `object`           | Styles for enter button including className.                            |\n| `..className`           | `string`           | ClassName for the enter button.                                         |\n| `.capsButtonStyle*`     | `object`           | Styles for caps button including className.                             |\n| `..className`           | `string`           | ClassName for the caps button.                                          |\n| `numberButtonStyle*`    | `object`           | Styles for number buttons including className.                          |\n| `.className`            | `string`           | ClassName for the number buttons.                                       |\n| `textButtonStyle`       | `object`           | Styles for text buttons including className.                            |\n| `.className`            | `string`           | ClassName for the text buttons.                                         |\n\nProps marked with \\* are required.\n","readmeFilename":"README.md"}