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.