{"id":15297113,"url":"https://github.com/nohomey/react-material-ui-keyboard","last_synced_at":"2025-10-07T10:30:55.897Z","repository":{"id":57334411,"uuid":"64676478","full_name":"NoHomey/react-material-ui-keyboard","owner":"NoHomey","description":"Virtual keyboard for TextField when needed","archived":true,"fork":false,"pushed_at":"2020-09-28T06:56:22.000Z","size":418,"stargazers_count":54,"open_issues_count":0,"forks_count":19,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-30T19:15:06.427Z","etag":null,"topics":["keyboard","keyboard-layout","material-ui","react","typescript","virtual-keyboard"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NoHomey.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-01T15:02:04.000Z","updated_at":"2023-08-26T11:29:53.000Z","dependencies_parsed_at":"2022-08-31T16:44:12.048Z","dependency_job_id":null,"html_url":"https://github.com/NoHomey/react-material-ui-keyboard","commit_stats":null,"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoHomey%2Freact-material-ui-keyboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoHomey%2Freact-material-ui-keyboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoHomey%2Freact-material-ui-keyboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NoHomey%2Freact-material-ui-keyboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NoHomey","download_url":"https://codeload.github.com/NoHomey/react-material-ui-keyboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877409,"owners_count":16554890,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["keyboard","keyboard-layout","material-ui","react","typescript","virtual-keyboard"],"created_at":"2024-09-30T19:15:11.370Z","updated_at":"2025-10-07T10:30:50.508Z","avatar_url":"https://github.com/NoHomey.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-material-ui-keyboard\n\n**The project is now archived since it requires a complete rewrite with modern day React and Material-UI!**\n\nVirtual keyboard for TextField when needed.\n\n[![npm version](https://badge.fury.io/js/react-material-ui-keyboard.svg)](https://badge.fury.io/js/react-material-ui-keyboard)\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/NoHomey/react-material-ui-keyboard)\n[![Build Status](https://semaphoreci.com/api/v1/nohomey/react-material-ui-keyboard/branches/master/badge.svg)](https://semaphoreci.com/nohomey/react-material-ui-keyboard)\n[![Code Climate](https://codeclimate.com/github/NoHomey/react-material-ui-keyboard/badges/gpa.svg)](https://codeclimate.com/github/NoHomey/react-material-ui-keyboard)\n[![Test Coverage](https://codeclimate.com/github/NoHomey/react-material-ui-keyboard/badges/coverage.svg)](https://codeclimate.com/github/NoHomey/react-material-ui-keyboard/coverage)\n[![Issue Count](https://codeclimate.com/github/NoHomey/react-material-ui-keyboard/badges/issue_count.svg)](https://codeclimate.com/github/NoHomey/react-material-ui-keyboard)\n![TypeScript](https://img.shields.io/badge/%3C%20%2F%3E-TypeScript-blue.svg)\n![Typings](https://img.shields.io/badge/typings-%E2%9C%93-brightgreen.svg)\n\nYou controll when to open it which allows cross platform App optimizations and code reusability for diferent platoforms such as Progressive Web Apps, Hybrid Apps, Electron Apps, Touch Devices, Smart TVs, Desktops, and all other Compatible JavaScript Enviroments.\n\nYou have the freedom to choose on which of them to `open` the `Keyboard` and on which to just use a `textField`!\n\n![Screenshot](https://raw.githubusercontent.com/NoHomey/react-material-ui-keyboard/master/screenshots/textField.png)\n\n![Screenshot](https://raw.githubusercontent.com/NoHomey/react-material-ui-keyboard/master/screenshots/show.png)\n\n# Install\n\nInstall with npm:\n\n```bash\n$ npm install react-material-ui-keyboard\n```\n\n[![NPM](https://nodei.co/npm/react-material-ui-keyboard.png?downloads=true\u0026stars=true)](https://nodei.co/npm/react-material-ui-keyboard/)\n\n# Changelog\n\n**Check [Change log](https://github.com/NoHomey/react-material-ui-keyboard/blob/master/CHANGELOG.md) for changes.**\n\n# Properties\n\n| Name                  | Type           | Default                                      | Description          |\n| --------------------- | ---------------| -------------------------------------------- | -------------------- |\n| automatic             | *bool*         |                                              | If true, keyboard will automaticlly: open when textField gets focused and close instead of firing onRequestClose. |\n| disableEffects        | *bool*         |                                              | If true, disables all effects (ripples, focus, hover) on all `keyboardKey`s |\n| open                  | *bool*         |                                              | Controls whether the Keyboard is opened or not. |\n| layouts*              | *string[][][]* |                                              | Keybaord layouts that can be changed when user clicks on 'Keyboard' key. |\n| keyboardKeyWidth      | *number*       | *this.context.muiThemet.button.minWidth*     | Override keyboard key's max width. |\n| keyboardKeyHeight     | *number*       | *this.context.muiThemet.button.height*       | Override keyboard key's max height. |\n| keyboardKeySymbolSize | *number*       | *this.context.muiThemet.flatButton.fontSize* | Override keyboard key's max symbol size. |\n| textField*            | *element*      |                                              | Input field used when keyboard is closed and cloned when it's opened.  |\n| onRequestClose        | *function*     |                                              | Fired when keyboard recives 'Enter' or 'Escape' eighter from onKeyDown listener or keyboard key touch/click event. |\n| onInput               | *function*     |                                              | Fired when keyboard recives 'Enter' **Signature:** `function(input: string) =\u003e void`. |\n| onInputValueChange    | *function*     |                                              | Fired when keyboard's input chages value **Signature:** `function(input: string) =\u003e void`. |\n| correctorName         | *string*       |                                              | Name of the cloned textField prop to which to bind corrector. |\n| corrector**           | *function*     |                                              | Function which is bound to the the cloned textField at correctorName prop. this is bound to the Keyboard, public method makeCorrection can be used to apply a correction to the keyboard input. |                                                 \n\nProps marked with \\* are required.\n\n\\*\\* corrector is required when correctorName is provided.\n\n# Requirements\n\n## `textField` must be a controlled input\n\n## Node passed to `textField` Prop must support the following props:\n\n- `value`\\* of type `string`\n- `readOnly`\\* of type `bool`\n\nProps marked with \\* must be passed down to the native `input` element.\n\n# Implementation\n\nreact-material-ui-keyboard is implemented using the followong Material-Ui Elements\n\n- Dialog\n- FlatButtton\n- SVG Icons\n\nand uses `React.cloneElement` to clone `textFiled` for the kyboard input field.\n\nThe used `Dialog` is `modal` which guaranties that only one keyboard can be opened which allows memory and performance optimizations. \n\n`Keyboard` Compoment uses `MuiTheme`, `props`, `window.innerWidth` and `window.innerHeight` information to calculate it's size and keyboard keys size (width x height) to ensure it always fits best on screen chech [GALLERY](https://github.com/NoHomey/react-material-ui-keyboard/blob/master/GALLERY.md).\n\n# Key Support\n\nFor supported keys read [KEYSUPPORT](https://github.com/NoHomey/react-material-ui-keyboard/blob/master/KEYSUPPORT.md)\n\n# Included Layouts\n\nThe following keyboard layouts are exported from `'react-material-ui-keyboard/layouts'`\n\n## numericKeyboard\n\n```js \nconst numericKeyboard = [\n    ['Escape', '-', 'Backspace'],\n    ['7',      '8',         '9'],\n    ['4',      '5',         '6'],\n    ['1',      '2',         '3'],\n    ['0',      '.',     'Enter']\n];\n```\n\n![Screenshot](https://raw.githubusercontent.com/NoHomey/react-material-ui-keyboard/master/screenshots/numeric.png)\n\n## alphaNumericKeyboard\n\n```js\nconst alphaNumericKeyboard = [\n    ['1',      '2',        '3', '4', '5', '6', '7', '8', '9',         '0'],\n    ['q',      'w',        'e', 'r', 't', 'y', 'u', 'i', 'o',         'p'],\n    ['a',      's',        'd', 'f', 'g', 'h', 'j', 'k', 'l', 'Backspace'],\n    ['Escape', 'CapsLock', 'z', 'x', 'c', 'v', 'b', 'n', 'm',     'Enter']\n];\n```\n\n![Screenshot](https://raw.githubusercontent.com/NoHomey/react-material-ui-keyboard/master/screenshots/alphanumeric.png)\n\n### With CapsLock On\n\n![Screenshot](https://raw.githubusercontent.com/NoHomey/react-material-ui-keyboard/master/screenshots/capsed.png)\n\n## extendedKeyboard\n\n```js\nconst extendedKeyboard = [\n    ['1',        '2', '3', '4', '5', '6', '7', '8', '9',         '0'],\n    ['q',        'w', 'e', 'r', 't', 'y', 'u', 'i', 'o',         'p'],\n    ['a',        's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'Backspace'],\n    ['CapsLock', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '-',  'CapsLock'],\n    ['Escape',   '@', '#',         '     ',         '.',     'Enter']\n];\n```\n### Demonstrating Spacebar and keyboard key size futers\n\n![Screenshot](https://raw.githubusercontent.com/NoHomey/react-material-ui-keyboard/master/screenshots/extended.png)\n\n# Creating Custom Keyboard Layout\n\n- All single chars suppoted as String can be used as a symbol key!\n- Empty strings can be used for blank spaces\n- Use `KeyboardEvent.key` names for all [Special keys] (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)\n- Use `'Keyboard'` for key with which user can change keyboard layout \n\n**All spacial keys (none Symbol will have an Icon and support at some point*)**\n\n**Check supported keys!**\n\n**If a key you want to use is not supported open an Issue.**\n\n# Public methods\n\n`Keyboard` exposes `public` method `makeCorrection` which can be used to apply keyboard input value corrections when keyboard is opened or within `correction` handller.\n\n# Public members\n\n`Keyboard` has one `public` `static` member which is designed to be overwritten: `automaitcOpenPredicate` it's signature is `function() =\u003e boolean`. It is  called when `automatic` is `true` and the attached `onFocus` handler on `textField` gets fired to determinate should keyboard `open` and disable the native virtual keyboard by assigning `readOnly` at `textField` in the `render`. Default `automaitcOpenPredicate` behaviour is to always return `true`. You can override it to change when to `automatic`lly open keyboard `onFocus`.\n\n# Examples\n\n```js\nimport * as React from 'react';\nimport TextField from 'material-ui/TextField';\nimport Keyboard from 'react-material-ui-keyboard';\nimport { extendedKeyboard } from 'react-material-ui-keyboard/layouts';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            open: false,\n            value: ''\n        };\n        this.onInput = this.handleInput.bind(this);\n    }\n\n    handleInput(input) {\n        this.setState({ value: input });\n    }\n    \n    render() {\n      \u003cKeyboard\n        textField={\n          \u003cTextField\n            id=\"text\"\n            value={this.state.value}\n          /\u003e\n        }\n        automatic\n        onInput={this.onInput}\n        layouts={[extendedKeyboard]}\n      /\u003e;\n    }\n};\n```\n\n# Example using custom textField and controlling when to open the keyboard and when to prevent the native virtual keyboard\n\n```js\nimport * as React from 'react';\nimport NumberInput from 'material-ui-number-input';\nimport Keyboard from 'react-material-ui-keyboard';\nimport { numericKeyboard } from 'react-material-ui-keyboard/layouts';\n\nfunction corrector(value) {\n    console.log(`correction ${value}`);\n    this.makeCorrection(value);\n}\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { open: false, value: '2' };\n        this.onFocus = this.handleFocus.bind(this);\n        this.onChange = this.handleChange.bind(this);\n        this.onRequestClose = this.handleRequestClose.bind(this);\n        this.onInput = this.handleInput.bind(this);\n        this.onError = this.handleError.bind(this);\n        this.onValid = this.handleValid.bind(this);\n    }\n    \n    canOpenKeyboard() {\n        return (this.state.value.length % 2) === 0;\n    }\n\n    handleFocus(event) {\n        if(this.canOpenKeyboard()) {\n            this.setState({ open: true });\n        }\n    }\n    \n    handleChange(event, value) {\n        console.log(value);\n        this.setState({ value: value });\n    }\n    \n    handleRequestClose() {\n        this.setState({ open: false });\n    }\n    \n    handleInput(input) {\n        console.log(input);\n        this.setState({ value: input });\n    }\n    \n    handleError(error) {\n        let errorText;\n        switch (error) {\n            case 'required':\n                errorText = 'This field is required';\n                break;\n            case 'invalidSymbol':\n                errorText = 'You are tring to enter none number symbol';\n                break;\n            case 'incompleteNumber':\n                errorText = 'Number is incomplete';\n                break;\n            case 'singleMinus':\n                errorText = 'Minus can be use only for negativity';\n                break;\n            case 'singleFloatingPoint':\n                errorText = 'There is already a floating point';\n                break;\n            case 'singleZero':\n                errorText = 'Floating point is expected';\n                break;\n            case 'min':\n                errorText = 'You are tring to enter number less than -10';\n                break;\n            case 'max':\n                errorText = 'You are tring to enter number greater than 12';\n                break;\n        }\n        this.setState({ errorText: errorText });\n    }\n    \n    handleValid(value) {\n        console.debug(`valid ${value}`);\n    }\n\n    componentDidMount() {\n        setTimeout(() =\u003e this.setState({ value: '89' }), 1000);\n    }\n    \n    render() {\n        const { state, onFocus, onChange, onError, onValid, onInput } = this;\n        const { value, errorText } = state;\n        const textField = (\n            \u003cNumberInput\n                id=\"num\"\n                required\n                value={value}\n                min={-10}\n                max={12}\n                strategy=\"warn\"\n                errorText={errorText}\n                onFocus={onFocus}\n                onChange={onChange}\n                onError={onError}\n                onValid={onValid}\n                floatingLabelText=\"Click for a Keyboard\" /\u003e\n        );\n\n        return (\n            \u003cKeyboard\n                textField={textField}\n                open={this.state.open}\n                onRequestClose={this.onRequestClose}\n                onInput={onInput}\n                correctorName=\"onRequestValue\"\n                corrector={corrector}\n                layouts={[numericKeyboard]}\n                keyboardKeyHeight={50}\n                keyboardKeyWidth={100}\n                keyboardKeySymbolSize={36}\n            /\u003e\n        );\n    }\n}\n```\n\n# Written in Typescript and Typescript Ready! ([check examples](https://github.com/NoHomey/react-material-ui-keyboard/blob/master/example))\n\n# Supports propTypes for regular JavaScript users\n\n# It is possible to use react-material-ui-keyboard in none material-ui project.\n\n## Limitations\n\nIf you need to change theme eg. gutter, spacing, colors or any other option you need to wrapp ```\u003cKeyboard ... /\u003e``` in ```MuiThemeProvider``` or to manually provide a ```muiTheme``` to parent's ```context```.\n\n# Testing\n\n1. `npm install`\n\n2. `npm test`\n\n# Contributing\n\n1. `npm install`\n\n2. Make changes\n\n3. If necessary add some tests to `__tests__`\n\n4. `npm test`\n\n5. Make a Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnohomey%2Freact-material-ui-keyboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnohomey%2Freact-material-ui-keyboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnohomey%2Freact-material-ui-keyboard/lists"}