Musical keyboard component written in React.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
TheoryOfNekomata 3a0e2b4d34 Update tests, scaffolding 10 months ago
.storybook Add keyboard map 3 years ago
docs Add labels, change props 3 years ago
example Add labels, change props 3 years ago
src Update tests, scaffolding 10 months ago
.editorconfig Initial commit 3 years ago
.eslintrc Update tests, scaffolding 10 months ago
.gitignore Update tests, scaffolding 10 months ago
.npmignore Update dependency list 3 years ago
LICENSE Update tests, scaffolding 10 months ago
README.md Update README 3 years ago
package.json Update tests, scaffolding 10 months ago
pridepack.json Update tests, scaffolding 10 months ago
publish.sh Bump version and updated publish script 3 years ago
tsconfig.eslint.json Update tests, scaffolding 10 months ago
tsconfig.json Update tests, scaffolding 10 months ago
vitest.config.ts Update tests, scaffolding 10 months ago
yarn.lock Update tests, scaffolding 10 months ago

README.md

Musical Keyboard

Musical keyboard component written in React.

Installation

This component is currently available in:

Once set up, install the package from the registry:

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):

import * as React from 'react'
import ReactDOM from 'react-dom'
import Keyboard from '@theoryofnekomata/react-musical-keyboard'

const App = () => {
  return (
    <div>
      <Keyboard
        startKey={21}
        endKey={108}
      />
    </div>
  )
}

const container = window.document.createElement('div')

window.document.body.appendChild(container)

ReactDOM.render(<App />, container)

Interactivity

The library also supports keyboard maps for handling mouse, touch, and keyboard events:

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 (
    <div>
      <Keyboard
        startKey={21}
        endKey={108}
        onChange={handleKeysChange}
      />
    </div>
  )
}

const container = window.document.createElement('div')

window.document.body.appendChild(container)

ReactDOM.render(<App />, container)

It is capable of server-side rendering support, falling back to making the keys behave like links, checkboxes or radio buttons. Simply supply the behavior prop.

Customization

The component is stylable, just supply custom components for the keys:

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 (
    <div>
      <Keyboard
        startKey={21}
        endKey={108}
        keyComponents={{
          natural: NaturalKey,
          accidental: AccidentalKey
        }}
      />
    </div>
  )
}

const container = window.document.createElement('div')

window.document.body.appendChild(container)

ReactDOM.render(<App />, container)

Components get their styles from CSS. The custom property --opacity-highlight is responsible for toggling the active, or “pressed” state of the key, simply assign it to the opacity style of the component you want to show for active keys.

The library also exposes other custom properties: --color-natural-key, --color-accidental-key, and --color-active-key for basic coloring of the keys. You may expose your own properties for your custom key components.

// ./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 (
    <div style={{ position: 'relative' }}>
      <img src={NOT_PRESSED_KEY} alt="" style={{ position: 'absolute', top: 0, left: 0, }} />
      <img src={PRESSED_KEY_OVERLAY} style={{ position: 'absolute', top: 0, left: 0, opacity: 'var(--opacity-highlight)', }} alt="" />
    </div>
  )
}

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.

The component also supports orientation and mirroring, for instance, in use with horizontally-spanning piano rolls. Specify using the orientation and mirroring props.

License

MIT. See License file for details.