2.0.6 ā¢ Published 12 months ago
xylophone-react v2.0.6
Xylophone
A React based xylophone ready to use out of the box
Play!
š¶ https://lauraaubin.github.io/xylophone/
Install
Your app must be using React and ReactDom.
$ npm install xylophone-reactUsage
import Xylophone from 'xylophone-react';
return <Xylophone />;Props
| Prop | Default | Values | Type | Description |
|---|---|---|---|---|
keyCount | 12 | 1 - ā | number | The number of keys |
colors | Default color map | No limits | {color?: string, colorPressed?: string, background?: string}[] | The color scheme of all keys |
shape | shrinking | shrinking, growing, flat | string | The shape of the whole xylophone |
height | 200 | 1 - ā | number | The height of the smallest key (px) |
width | Stretch to fit container | 1 - ā | number | The width of all keys (px) |
startingOctave | 2 | 1 - ā | number | The starting octave of the first key |
pressedKey | None | None | (number) => void | Returns which key was pressed most recently |
numberOfKeys
- 12 colors have been set by default. In order to increase the
numberOfKeysover 12, you need to create your own custom color scheme.
colors
- Pass in a custom color in the form of a hex code or named value.
colorswill use the last element to paint all remaining keys. For example, the following will paint the first key pink, and all remaining keys teal:
colors={[
{
color: 'pink',
colorPressed: 'grey',
background: 'salmon'
},
{
color: 'teal'
}
]}pressedKey:
pressedKeyallows you to pass in a function which can be used to determine which key was pressed most recently:
const handleKeyPress = (number) => {
...
}
...
<Xylophone
pressedKey={handleKeyPress}
/>Develop
Changes should only be made within the ./components folder. The ES5 folder is the compiled equivalent. ES5 compiles Sass to CSS:
yarn compile-filesInstall package locally via:
npm install path/to/this/folderFeedback
Feel free to open an issue with feedback or a feature request. All are welcome š¤!