diff --git a/README.md b/README.md
index 250bdf32..8b0451a7 100644
--- a/README.md
+++ b/README.md
@@ -14,9 +14,17 @@
## Installation
+### npm
+
`npm install simple-keyboard --save`
-## Usage
+### zip file (self-hosted)
+
+[Click here to download the latest release (zip format).](https://github.com/hodgef/simple-keyboard/zipball/master)
+
+> Want to use a CDN instead of self-host? Scroll down to the "Usage from CDN" instructions below.
+
+## Usage with npm
### js
@@ -24,10 +32,28 @@
import Keyboard from 'simple-keyboard';
import 'simple-keyboard/build/css/index.css';
-var keyboard = new Keyboard({
- onChange: input => this.onChange(input),
- onKeyPress: button => this.onKeyPress(button)
-});
+class App {
+ constructor(){
+ document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+ }
+
+ 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);
+ }
+}
+
+export default App;
````
### html
@@ -38,6 +64,23 @@ var keyboard = new Keyboard({
> Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js).
+## Usage from CDN
+
+### html
+
+````html
+
+
+
+
+
+
+
+
+
+
+````
+
## Options
You can customize the Keyboard by passing options to it.
@@ -118,7 +161,7 @@ newLineOnEnter: false
## Methods
-simple-keybord has a few methods you can use to further control it's behavior.
+simple-keyboard has a few methods you can use to further control it's behavior.
To access these functions, you need the instance the simple-keyboard component, like so:
```js