From 41b1ae294112ad6a0f9198308d219789c2ae5341 Mon Sep 17 00:00:00 2001 From: Francisco Hodge Date: Fri, 2 Mar 2018 13:33:06 -0500 Subject: [PATCH] Updating README, fixing minor bugs --- README.md | 116 ++++++++++++++++++++++++++++++++- package.json | 2 +- src/demo/App.js | 61 +++++++++++++++-- src/lib/components/Keyboard.js | 12 ++-- 4 files changed, 175 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 049b0c76..2d2cd4e3 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,114 @@ -# react-simple-keyboard -Simple React.js Virtual Keyboard - no jQuery dependency. +# simple-keyboard [![npm](https://img.shields.io/npm/v/simple-keyboard.svg)]() +[![Dependencies](https://img.shields.io/david/hodgef/simple-keyboard.svg)]() +[![Dev Dependencies](https://img.shields.io/david/dev/hodgef/simple-keyboard.svg)]() + +[![NPM](https://nodei.co/npm/simple-keyboard.png)](https://npmjs.com/package/simple-keyboard) + +> An easily customisable and responsive on-screen virtual keyboard for React.js projects. + +## Installation + +`npm i simple-keyboard --save` + +## Usage + +```` +import React, {Component} from 'react'; +import Keyboard from 'simple-keyboard'; +import 'simple-keyboard/build/css/index.css'; + +class App extends Component { + + onChange = (input) => { + console.log("Input changed", input); + } + + onKeyPress = (button) => { + console.log("Button pressed", button); + } + + render(){ + return ( + + this.onChange(input)} + onKeyPress={button => + this.onKeyPress(button)} + /> + ); + } + +} + +export default App; +```` + +# Options +You can customize the Keyboard by passing options (props) to it. Here are the available options (the code examples are the defaults): + +### layout +> Modify the keyboard layout +``` +layout={{ + 'default': [ + '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}', + '{tab} q w e r t y u i o p [ ] \\', + '{lock} a s d f g h j k l ; \' {enter}', + '{shift} z x c v b n m , . / {shift}', + '.com @ {space}' + ], + 'shift': [ + '~ ! @ # $ % ^ & * ( ) _ + {bksp}', + '{tab} Q W E R T Y U I O P { } |', + '{lock} A S D F G H J K L : " {enter}', + '{shift} Z X C V B N M < > ? {shift}', + '.com @ {space}' + ] +}} +``` + +### layoutName +> Specifies which layout should be used. +``` +layoutName={"default"} +``` + +### display +> Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: "delete"). +``` +display={{ + '{bksp}': 'delete', + '{enter}': '< enter', + '{shift}': 'shift', + '{s}': 'shift', + '{tab}': 'tab', + '{lock}': 'caps', + '{accept}': 'Submit', + '{space}': ' ', + '{//}': ' ' +}} +``` + +### theme +> A prop to add your own css classes. You can add multiple classes separated by a space. +``` +theme={"hg-theme-default"} +``` + +### debug +> Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input. +``` +debug={false} +``` + +## Demo + +To run demo on your own computer: + +* Clone this repository +* `npm install` +* `npm start` +* Visit http://localhost:3000/ + +## Note +This is a work in progress. Feel free to submit any issues you have at: https://github.com/hodgef/simple-keyboard/issues \ No newline at end of file diff --git a/package.json b/package.json index 5ec4271f..17d8c62f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "simple-keyboard", - "version": "0.0.2", + "version": "1.0.2", "description": "React.js Virtual Keyboard", "main": "build/index.js", "scripts": { diff --git a/src/demo/App.js b/src/demo/App.js index daad355d..272f6a3f 100644 --- a/src/demo/App.js +++ b/src/demo/App.js @@ -1,10 +1,57 @@ -import React from 'react'; +import React, {Component} from 'react'; import Keyboard from '../lib'; -const App = () => ( -
- -
-); +class App extends Component { + + onChange = (input) => { + console.log("Input changed", input); + } -export default App; + onKeyPress = (button) => { + console.log("Button pressed", button); + } + + render(){ + return ( +
+ this.onChange(input)} + onKeyPress={button => this.onKeyPress(button)} + layoutName={"default"} + layout={{ + 'default': [ + '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}', + '{tab} q w e r t y u i o p [ ] \\', + '{lock} a s d f g h j k l ; \' {enter}', + '{shift} z x c v b n m , . / {shift}', + '.com @ {space}' + ], + 'shift': [ + '~ ! @ # $ % ^ & * ( ) _ + {bksp}', + '{tab} Q W E R T Y U I O P { } |', + '{lock} A S D F G H J K L : " {enter}', + '{shift} Z X C V B N M < > ? {shift}', + '.com @ {space}' + ] + }} + theme={"myTheme hg-theme-default"} + debug={true} + display={{ + '{bksp}': 'delete', + '{enter}': '< enter', + '{shift}': 'shift', + '{s}': 'shift', + '{tab}': 'tab', + '{lock}': 'caps', + '{accept}': 'Submit', + '{space}': ' ', + '{//}': ' ' + }} + /> +
+ ); + } + +} + +export default App; \ No newline at end of file diff --git a/src/lib/components/Keyboard.js b/src/lib/components/Keyboard.js index df8c3581..f09bd251 100644 --- a/src/lib/components/Keyboard.js +++ b/src/lib/components/Keyboard.js @@ -65,13 +65,13 @@ class App extends Component { } render() { - let layoutName = this.state.layoutName || "default"; - let layout = this.state.layout || KeyboardLayout.getLayout(layoutName); - let themeClass = this.state.theme || `hg-theme-default`; + let layoutName = this.props.layoutName || "default"; + let layout = this.props.layout || KeyboardLayout.getLayout(layoutName); + let themeClass = this.props.theme || `hg-theme-default`; return (
- {layout.default.map((row, index) => { + {layout[layoutName].map((row, index) => { let rowArray = row.split(' '); return ( @@ -99,9 +99,9 @@ class App extends Component { App.propTypes = { layoutName: PropTypes.string, - layout: PropTypes.array, + layout: PropTypes.object, theme: PropTypes.string, - display: PropTypes.string, + display: PropTypes.object, onChange: PropTypes.func, onKeyPress: PropTypes.func, debug: PropTypes.bool