Improving readme

README.md

@@ -9,6 +9,8 @@
 
 > An easily customisable and responsive on-screen virtual keyboard for React.js projects.
 
+<img src="src/demo/images/keyboard.PNG" align="center" width="100%">
+
 ## Installation
 
 `npm install simple-keyboard --save`
@@ -117,8 +119,67 @@ theme={"hg-theme-default"}
 debug={false}
 ```
 
+### newLineOnEnter
+
+> Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not.
+
+```js
+newLineOnEnter={true}
+```
+
+## Methods
+
+simple-keybord has a few methods you can use to further control it's behavior.
+To access these functions, you need a `ref` of the simple-keyboard component, like so:
+
+```js
+<Keyboard
+  ref={r => this.keyboard = r}
+  [...]
+/>
+
+// Then, on componentDidMount ..
+this.keyboard.methodName(params);
+```
+
+### clearInput
+
+> Clear the keyboard's input.
+
+```js
+this.keyboard.clearInput();
+```
+
+### getInput
+
+> Get the keyboard's input (You can also get it from the _onChange_ prop).
+
+```js
+let input = this.keyboard.getInput();
+```
+
+### setInput
+
+> Set the keyboard's input. Useful if you want the keybord to initialize with a default value, for example.
+
+```js
+this.keyboard.setInput("Hello World!");
+```
+
+It returns a promise, so if you want to run something after it's applied, call it as so:
+
+```js
+let inputSetPromise = this.keyboard.setInput("Hello World!");
+
+inputSetPromise.then((result) => {
+  console.log("Input set");
+});
+```
+
 ## Demo
 
+<img src="src/demo/images/demo.gif" align="center" width="600">
+
 To run demo on your own computer:
 
 * Clone this repository

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "React.js Virtual Keyboard",
   "main": "build/index.js",
   "scripts": {

src/demo/App.css

@@ -0,0 +1,31 @@
+.demoPage {
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding-top: 20px;
+}
+
+.demoPage .screenContainer {
+  background: rgba(0,0,0,0.8);
+  border: 20px solid;
+  height: 300px;
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.demoPage .inputContainer {
+  color: white;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: monospace;
+  width: 100%;
+  height: 100%;
+}
+
+.simple-keyboard.hg-layout-custom {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}

src/demo/App.js

@@ -1,23 +1,59 @@
 import React, {Component} from 'react';
 import Keyboard from '../lib';
+import './App.css';
 
 class App extends Component {
+  state = {
+    input: '',
+    layoutName: "default"
+  }
+
+  componentDidMount(){
+    this.keyboard.setInput("Hello World!")
+      .then(input => {
+        this.setState({input: input});
+      });
+  }
   
   onChange = (input) => {
-    console.log("Input changed", input);
+    this.setState({
+      input: input
+    }, () => {
+      console.log("Input changed", input);
+    });
   }
 
   onKeyPress = (button) => {
     console.log("Button pressed", button);
+
+    /**
+     * Shift functionality
+     */
+    if(button === "{lock}" || button === "{shift}")
+      this.handleShiftButton();
+
+  }
+
+  handleShiftButton = () => {
+    let layoutName = this.state.layoutName;
+    let shiftToggle = layoutName === "default" ? "shift" : "default";
+
+    this.setState({
+      layoutName: shiftToggle
+    });
   }
   
   render(){
     return (
-      <div>
+      <div className={"demoPage"}>
+        <div className={"screenContainer"}>
+          <textarea className={"inputContainer"} value={this.state.input} />
+        </div>
         <Keyboard
+          ref={r => this.keyboard = r}
           onChange={input => this.onChange(input)}
           onKeyPress={button => this.onKeyPress(button)}
-          layoutName={"default"}
+          layoutName={this.state.layoutName}
           layout={{
             'default': [
               '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',

src/lib/components/Keyboard.css

@@ -36,23 +36,28 @@ body, html {
 /**
  * hg-theme-default theme
  */
- .simple-keyboard.hg-theme-default {
-   background-color: rgba(0,0,0,0.2);
-   padding: 5px;
-   border-radius: 5px;
+.simple-keyboard.hg-theme-default {
+  background-color: rgba(0,0,0,0.2);
+  padding: 5px;
+  border-radius: 5px;
  }
 
- .simple-keyboard.hg-theme-default .hg-button {
-  box-shadow: 0px 0px 51px -2px rgba(0,0,0,0.3);
+.simple-keyboard.hg-theme-default .hg-button {
+  box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);
   height: 40px;
   border: 1px solid rgba(0,0,0,0.25);
   border-radius: 5px;
   box-sizing: border-box;
   padding: 5px;
   background: white;
+  border-bottom: 1px solid gray;
  }
 
- .simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
+ .simple-keyboard.hg-theme-default .hg-button:active {
+  background: #e4e4e4;
+ }
+
+.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
   width: 33.3%;
   height: 60px;
   align-items: center;

src/lib/components/Keyboard.js

@@ -23,6 +23,29 @@ class App extends Component {
     }
   }
 
+  clearInput = () => {
+    this.setState({
+      input: ''
+    });
+  }
+
+  getInput = () => {
+    return this.state.input;
+  }
+
+  setInput = input => {
+    return new Promise(resolve => {
+      this.setState({
+        input: input
+      }, () => {
+        resolve(input);
+      });
+    })
+    .catch(reason => {
+      console.warn(reason);
+    });
+  }
+
   handleButtonClicked = (button) => {
     let debug = this.props.debug;
     
@@ -41,7 +64,11 @@ class App extends Component {
     /**
      * Updating input
      */
-    let updatedInput = Utilities.getUpdatedInput(button, this.state.input);
+    let options = {
+      newLineOnEnter: this.props.newLineOnEnter !== false || true
+    }
+    
+    let updatedInput = Utilities.getUpdatedInput(button, this.state.input, options);
 
     if(this.state.input !== updatedInput){
       this.setState({

src/lib/services/Utilities.js

@@ -20,6 +20,8 @@ class Utilities {
       output = 'dollarsign';
     else if(string === "=")
       output = 'equals';
+    else if(string === "+")
+      output = 'plus';
     else if(string === "-")
       output = 'minus';
     else if(string === "'")
@@ -68,13 +70,18 @@ class Utilities {
     return display[button] || button;
   }
 
-  static getUpdatedInput = (button, input) => {
+  static getUpdatedInput = (button, input, options) => {
     let output = input;
+    let newLineOnEnter = options.newLineOnEnter;
 
     if(button === "{bksp}" && output.length > 0)
       output = output.slice(0, -1);
     else if(button === "{space}")
       output = output + ' ';
+    else if(button === "{tab}")
+      output = output + "\t";
+    else if(button === "{enter}" && newLineOnEnter)
+      output = output + "\n";
     else if(!button.includes("{") && !button.includes("{"))
       output = output + button;