{"id":16239138,"url":"https://github.com/xtrinch/react-touch-screen-keyboard","last_synced_at":"2026-02-26T06:44:58.967Z","repository":{"id":57346606,"uuid":"80828061","full_name":"xtrinch/react-touch-screen-keyboard","owner":"xtrinch","description":"React touch screen virtual keyboard, opened on input focused","archived":false,"fork":false,"pushed_at":"2020-04-16T11:50:00.000Z","size":1093,"stargazers_count":47,"open_issues_count":7,"forks_count":32,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-03T18:49:37.514Z","etag":null,"topics":["keyboard","onscreen-keyboard","react","touch-screen","virtual-keyboard"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/xtrinch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-03T12:41:58.000Z","updated_at":"2023-12-16T05:43:32.000Z","dependencies_parsed_at":"2022-09-15T09:22:31.364Z","dependency_job_id":null,"html_url":"https://github.com/xtrinch/react-touch-screen-keyboard","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"purl":"pkg:github/xtrinch/react-touch-screen-keyboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtrinch%2Freact-touch-screen-keyboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtrinch%2Freact-touch-screen-keyboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtrinch%2Freact-touch-screen-keyboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtrinch%2Freact-touch-screen-keyboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xtrinch","download_url":"https://codeload.github.com/xtrinch/react-touch-screen-keyboard/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtrinch%2Freact-touch-screen-keyboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29850722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T22:37:40.667Z","status":"online","status_checked_at":"2026-02-26T02:00:06.774Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","onscreen-keyboard","react","touch-screen","virtual-keyboard"],"created_at":"2024-10-10T13:42:25.688Z","updated_at":"2026-02-26T06:44:58.953Z","avatar_url":"https://github.com/xtrinch.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/react-touch-screen-keyboard.svg)](https://badge.fury.io/js/react-touch-screen-keyboard)\n[![npm](https://img.shields.io/npm/dt/react-touch-screen-keyboard.svg)]()\n# react-touch-screen-keyboard\n\n![alt tag](https://raw.githubusercontent.com/xTrinch/react-touch-screen-keyboard/master/keyboard.png)\n\n## Quick start\n\nThis library will render a draggable virtual keyboard on the bottom of the screen when the input is selected. The usage is very simple - instead of using the input tag, use the KeyboardedInput tag from the library. You can control the input's value via the callback function you give to its props.\n\nCurrently supported keyboards: us, de, ru, fr\n\n**Installing via npm**\n\n```\nnpm install react-touch-screen-keyboard\n```\n\n**Installing via npm (React v15)**\n\n```\nnpm install react-touch-screen-keyboard@0.3.15\n```\n\n### Example\n\n```js\n\nimport React from 'react';\nimport KeyboardedInput from 'react-touch-screen-keyboard';\nimport 'react-touch-screen-keyboard/lib/Keyboard.css'; // if you just want css\nimport 'react-touch-screen-keyboard/lib/Keyboard.scss'; // if you've got sass-loader\n\nclass Input extends React.Component {\n  render() {\n    return (\n      \u003cKeyboardedInput\n        enabled\n        required\n        type={this.props.type}\n        onChange={this.props.onChange}\n        onBlur={this.props.onBlur}\n        onFocus={this.props.onFocus}\n        value={this.props.value}\n        min={this.props.min}\n        max={this.props.max}\n        step={this.props.step}\n        name={this.props.name}\n        inputClassName={this.props.inputClassName}\n        keyboardClassName={this.props.keyboardClassName}\n        placeholder={this.props.placeholder}\n        defaultKeyboard=\"de\"\n        secondaryKeyboard=\"us\" // optional\n        isFirstLetterUppercase={true} // optional, default is `false`\n        uppercaseAfterSpace={true} // optional, default is `false`\n        isDraggable={false} // optional, default is `true`\n        readOnly={this.props.readOnly} // optional\n        opacity={0.9} // optional\n      /\u003e\n    );\n  }\n}\nexport default Input;\n\n```\n\n#### Use Custom Keyboard\n\nYou can pass a Nx3 sized array into `defaultKeyboard` prop to render a customize layout.\n\nYou can place functional keys using the following placeholders:\n\n| Placeholder | Key |\n|---|---|\n| *sh | Shift |\n| *bs | Backspace |\n\n```js\n\nimport React from 'react';\nimport KeyboardedInput from 'react-touch-screen-keyboard';\nimport 'react-touch-screen-keyboard/lib/Keyboard.css';\n\nclass Input extends React.Component {\n  render() {\n    const CustomMapping = [\n      ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],\n      ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '@'],\n      ['z', 'x', 'c', 'v', 'b', 'n', 'm', '.com']\n    ];\n      \n    return (\n      \u003cKeyboardedInput\n        enabled\n        type={this.props.type}\n        value={this.props.value}\n        name={this.props.name}\n        defaultKeyboard={CustomMapping}\n      /\u003e\n    );\n  }\n}\nexport default Input;\n\n```\n\n#### Managing focus programmatically\n\nThe `focus()` function can be used to set the focus on the input field and show the keyboard. You can [access the component via its ref](https://reactjs.org/docs/refs-and-the-dom.html).\n\nFor example, to focus the input field when clicking on a button, first set the ref:\n\n```jsx\n  \u003cKeyboardedInput\n    ref={ref =\u003e { this.myInput = ref; }}\n    ...\n```\n\nThen call the `focus()` function in the click handler of a button:\n\n```jsx\n  \u003cButton onClick={() =\u003e { this.myInput.focus(); }}\u003e\n    Click Me\n  \u003c/Button\u003e\n\n```\n\nSee the [examples](examples/index.js) for a more complete sample.\n\n#### Running Local Example\n\n    # NPM\n    $ npm run-script start\n    \n    # Yarn\n    $ yarn start\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxtrinch%2Freact-touch-screen-keyboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxtrinch%2Freact-touch-screen-keyboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxtrinch%2Freact-touch-screen-keyboard/lists"}