Claviature

This lib allows you to render a flexible SVG piano claviature on the web. This package is a successor to svg-piano. To find out more about why this lib exists, check out the blog post.

Install

``sh
npm i claviature --save
`

Usage

`js
import { getClaviature } from 'claviature';
const svg = getClaviature({
options,
onClick,
onMouseDown,
onMouseUp,
onMouseLeave,
});
console.log(svg);
// do something with svg
`

This library is framework agnostic, which allows it to be framework agnostic.
To render the object you get from getClaviature, just wire it up with your favorite view library.

React example

This is how you render with react:

`js
export default function Claviature({
options,
onClick,
onMouseDown,
onMouseUp,
onMouseLeave,
}: any) {
const svg = getClaviature({
options,
onClick,
onMouseDown,
onMouseUp,
onMouseLeave,
});
return (

{svg.children.map((el, i) => {
const TagName = el.name;
return (
${el.name}-${i}} {...el.attributes}>
{el.value}

);
})}

);
}
`

Options

You can customize the claviature using the following options:

$3

`js

`

$3

`js

`

$3

`js

`

$3

`js
options={{
colorize: [
{ keys: ['C3', 'E3', 'G3'], color: 'steelblue' },
{ keys: ['A3', 'C#4', 'E4'], color: 'tomato' },
],
}}
/>
`

options={{
colorize: [
{ keys: ['C3', 'E3', 'G3'], color: 'steelblue' },
{ keys: ['A3', 'C#4', 'E4'], color: 'tomato' },
],
}}
/>

$3

`js

`

$3

`js

`

$3

`js
onClick={(key) => {
console.log('clicked', key);
alert(clicked ${key});
}}
/>
`

$3

`js
options={{
colorize: [{ keys: ['C3', 'E3', 'G3', 'Bb3'], color: 'steelblue' }],
labels: { C3: '1', E3: '3', G3: '5', Bb3: 'b7' },
}}
/>
`

$3

`js
options={{
topLabels: true,
colorize: [{ keys: ['C3', 'E3', 'G3', 'Bb3'], color: 'steelblue' }],
labels: { C3: '1', E3: '3', G3: '5', Bb3: 'b7' },
}}
/>
``