react-music-keyboard

A simple easy-to-use and highly customizable React component emulating a musical keyboard.

Check out a live demo here: Demo!

Installation

npm i react-music-keyboard

OR

yarn add react-music-keyboard

Usage

import React from 'react'
import { Keyboard } from 'react-music-keyboard'

<Keyboard />

Props

| Props | Type | Default | Description | | ------------------- | ----------------------- | ------------- | ------------------------------------------------------------------------------------------- | | height | number | 180 | The height of the keyboard in pixels. | | whiteKeyWidth | number | 50 | The width of each white key in pixels. | | blackKeyWidth | number | 20 | The width of each black key in pixels. Must not be greater than the width of a white key. | | keySpacing | number | 5 | The space between each white key in pixels. | | startNote | string | "C2" | The starting note: name + octave. Note that black keys use sharps, e.g. F#4 instead of Gb6. | | endNote | string | "A4" | The ending note. Same format as the starting note. Must be higher than the starting note. | | sound | boolean | true | Whether to play a sound when a key is pressed. | | duration | number | 0.5 | The duration of the sound in secounds. | | onKeyPress | function | (key) => {} | Function to execute when key is pressed. The key name is passed as the argument. | | borderRadius | number | 15 | Border radius of the keys | | whiteKeyColor | string (HEX color code) | "#fff" | Fill color of the white keys. | | blackKeyColor | string (HEX color code) | #000" | Fill color of the black keys. | | transition | number | 100 | Transition speed between hover animation in milliseconds. | | whiteKeyStyles | object | {} | Additional styles applied to white keys. | | blackKeyStyles | object | {} | Additional styles applied to black keys. | | containerStyles | object | {} | Additional styles applied to the keyboard container. | | whiteKeyClass | string | "" | Additional classes applied to white keys. | | blackKeyClass | string | "" | Additional classes applied to black keys. | | containerClass | string | "" | Additional classes applied to the keyboard container. |

Additional restrictions

• All number props must be greater than 0.
• Start and end notes must be white keys.
• keySpacing must be between 1 and 10.

Using the additional classes

The additional classes are useful for non-JS styles, e.g. :hover.

Define the styles in a CSS file, and import it into your component file, but be sure to use the !important tag.