React-music-keyboard NPM

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

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.