diff --git a/README.md b/README.md index 63f5f4d6..de3e6240 100644 --- a/README.md +++ b/README.md @@ -3,14 +3,10 @@ [![npm](https://img.shields.io/npm/v/simple-keyboard.svg)](https://www.npmjs.com/package/simple-keyboard) -> An easily customisable and responsive on-screen virtual keyboard for Javascript projects. - -> Want the React.js version? Get [react-simple-keyboard](https://www.npmjs.com/package/react-simple-keyboard) instead! +> An easily customisable and responsive on-screen virtual keyboard for Javascript project. -[Live Demo](https://franciscohodge.com/simple-keyboard/demo) - ## Installation @@ -32,36 +28,30 @@ import Keyboard from 'simple-keyboard'; import 'simple-keyboard/build/css/index.css'; -class App { - constructor(){ - document.addEventListener('DOMContentLoaded', this.onDOMLoaded); - } +let keyboard = new Keyboard({ + onChange: input => this.onChange(input), + onKeyPress: button => this.onKeyPress(button) +}); - onDOMLoaded = () => { - this.keyboard = new Keyboard({ - onChange: input => this.onChange(input), - onKeyPress: button => this.onKeyPress(button) - }); - } - - onChange = input => { - console.log("Input changed", input); - } - - onKeyPress = button => { - console.log("Button pressed", button); - } +function onChange(input){ + document.querySelector(".input").value = input; + console.log("Input changed", input); } -export default App; +function onKeyPress(button){ + console.log("Button pressed", button); +} ```` ### html ````html +
```` +[![Edit krzkx19rr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/krzkx19rr) + > Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js). ## Usage from CDN @@ -69,32 +59,54 @@ export default App; ### html ````html - - + - + + -
- - + + + ```` +### js (index.js) + +````js +window.require.config({ + paths: { + "keyboard": "https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/index" + } +}); + +window.require(["keyboard"], + function (SimpleKeyboard) { + let Keyboard = SimpleKeyboard.default; + + let myKeyboard = new Keyboard({ + onChange: input => onChange(input), + onKeyPress: button => onKeyPress(button) + }); + + function onChange(input) { + document.querySelector(".input").value = input; + console.log("Input changed", input); + } + + function onKeyPress(button) { + console.log("Button pressed", button); + } + } +); +```` + +[![Edit 6n0wzxjmjk](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6n0wzxjmjk) + ## Options You can customize the Keyboard by passing options to it. @@ -329,10 +341,10 @@ For example: -### Live demo - [https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo) +[![Edit krzkx19rr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/krzkx19rr) + ### To run demo on your own computer * Clone this repository diff --git a/package-lock.json b/package-lock.json index 841ec80c..d9277d27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "simple-keyboard", - "version": "2.0.0", + "version": "2.1.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index eba4db1a..ccb4e7e6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "simple-keyboard", - "version": "2.1.5", + "version": "2.1.6", "description": "On-screen Virtual Keyboard", "main": "build/index.js", "scripts": {