Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/felixroos/claviature
A versatile SVG piano for the web
https://github.com/felixroos/claviature
Last synced: 2 months ago
JSON representation
A versatile SVG piano for the web
- Host: GitHub
- URL: https://github.com/felixroos/claviature
- Owner: felixroos
- Created: 2022-07-31T09:32:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-31T21:52:11.000Z (over 2 years ago)
- Last Synced: 2024-09-28T00:28:08.300Z (3 months ago)
- Language: TypeScript
- Size: 11.7 KB
- Stars: 9
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Claviature
This lib allows you to render a flexible SVG piano claviature on the web. This package is a successor to [svg-piano](https://github.com/felixroos/svg-piano). To find out more about why this lib exists, check out the [blog post](https://loophole-letters.vercel.app/claviature).
## 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
import { getClaviature } from "claviature";
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.value}
);
})}
);
}
```
## Options
You can customize the claviature using the following options:
### range
```js
```
### palette
```js
```
### stroke
```js
```
### colorize
```js
```
### scaleX + scaleX
```js
```
### upperHeight + lowerHeight
```js
```
### onClick
```js
{
console.log('clicked', key);
alert(`clicked ${key}`);
}}
/>
```
### labels
```js
```
### topLabels
```js
```