diff --git a/README.md b/README.md
index df66dcb..c0329fb 100644
--- a/README.md
+++ b/README.md
@@ -4,12 +4,22 @@ Musical keyboard component written in React.
## Installation
+This component is currently available in:
+
+* [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh)
+* [npm](https://npmjs.com)
+* [GitHub Package Registry](https://github.com/Temoto-kun/react-musical-keyboard/packages) for the [Github mirror](https://github.com/Temoto-kun/react-musical-keyboard)
+
+Once set up, install the package from the registry:
+
```shell script
yarn add @theoryofnekomata/react-musical-keyboard
```
## Usage
+Basic usage is as follows, rendering the keyboard range of a modern grand piano (88 keys, from A0 to C8):
+
```jsx harmony
import * as React from 'react'
import ReactDOM from 'react-dom'
@@ -18,18 +28,114 @@ import Keyboard from '@theoryofnekomata/react-musical-keyboard'
const App = () => {
return (
-
+
)
}
const container = window.document.createElement('div')
+window.document.body.appendChild(container)
+
ReactDOM.render(, container)
+```
+
+The library also supports keyboard maps for handling mouse, touch, and keyboard events:
+
+```jsx harmony
+import * as React from 'react'
+import ReactDOM from 'react-dom'
+import Keyboard, { KeyboardMap } from '@theoryofnekomata/react-musical-keyboard'
+
+const App = () => {
+ const handleKeysChange = keys => {
+ // TODO handle key change: send MIDI events, play audio samples, etc.
+ }
+
+ return (
+
+
+
+
+
+ )
+}
+
+const container = window.document.createElement('div')
+
+window.document.body.appendChild(container)
+
+ReactDOM.render(, container)
+```
+
+The component is stylable, just supply custom components for the keys:
+
+```jsx harmony
+import * as React from 'react'
+import ReactDOM from 'react-dom'
+import Keyboard from '@theoryofnekomata/react-musical-keyboard'
+import NaturalKey from './my-styled-keys/NaturalKey'
+import AccidentalKey from './my-styled-keys/AccidentalKey'
+
+const App = () => {
+ return (
+
+
+
+ )
+}
+
+const container = window.document.createElement('div')
window.document.body.appendChild(container)
+
+ReactDOM.render(, container)
```
+Custom keys should accept a `keyChannels` prop for active keys. For instance, in the custom key components imported above:
+
+```jsx harmony
+// ./my-styled-keys/NaturalKey.js
+
+import * as React from 'react'
+import NOT_PRESSED_KEY from './not-pressed.png'
+import PRESSED_KEY_OVERLAY from './pressed-overlay.png'
+
+const NaturalKey = ({
+ keyChannels = []
+}) => {
+ return (
+
+
+ {keyChannels.map(k => (
+
+ ))}
+
+ )
+}
+
+export default NaturalKey
+```
+
+Take note that pressed keys from multiple channels might overlap, therefore it is advisable to support multiple channels
+pressing a single key at once.
+
## License
MIT. See [License file](./LICENSE) for details.