Comments (2)
Thanks a lot. For some reason I didn't get a notification from Github until now, but I will try your suggestions.
from react-piano.
Yeah, I didn't want to bake in responsive styling behavior directly into the component, so I chose a border-radius that looks good by default at medium-to-large key sizes but not tiny ones.
I'm still not sure if I should change the default CSS here (it would be a small breaking change for existing users) but it is an option. However, you can customize the styling yourself easily and are encouraged to do so! You could add this CSS:
.ReactPiano__Key--accidental {
border-radius: 0 0 2px 2px;
}
.ReactPiano__Key--natural {
border-radius: 0 0 2px 2px;
}
If you want to have responsive styles depending on how wide each key is, you could implement it with something like this:
import { Piano, MidiNumbers } from 'react-piano';
import _ from 'lodash';
render() {
const pianoWidth = 500;
const noteRange = { first: MidiNumbers.fromNote('c3'), last: MidiNumbers.fromNote('f5') };
const numNaturalNotes = _.range(noteRange.first, noteRange.last + 1).filter((note) => !MidiNumbers.getAttributes(note).isAccidental);
const naturalKeyWidth = pianoWidth / numNaturalNote;
return (
<Piano className={naturalKeyWidth < 8 ? 'ReactPiano--small-keys' : null} noteRange={noteRange} width={pianoWidth} />
);
}
And in a stylesheet:
.ReactPiano--small-keys .ReactPiano__Key--accidental {
border-radius: 0 0 2px 2px;
}
.ReactPiano--small-keys .ReactPiano__Key--natural {
border-radius: 0 0 2px 2px;
}
Does that help get you what you need?
from react-piano.
Related Issues (20)
- register keyboard events on custom dom nodes?
- When using two piano keyboards in two lines, on renderNoteLabel only labels on bottom keyboard will be turned of on
- What's the difference between playNote and onPlayNoteInput?
- npm install fails HOT 1
- The mousedown listener is placed on the whole document.
- Question: How do I record the input and save it so I can use it later for play along like a piano learning app? HOT 5
- Pressing down more than 4 keys at the same time is unreliable HOT 5
- activeNotes prop is not used to initialize state on first render
- Allow more key combination with event.code instead? HOT 1
- Separating the utilities from the UI HOT 4
- Internationalization issue (Y and Z) HOT 1
- How to sustain Active Notes on Mouse Over? HOT 3
- Does this or will this support a MIDI Keyboard? HOT 3
- Octave keyboard shortcut?
- How do I turn a key blue. I can play a sound by calling playNote but it doesn't color the key in the same way it is when I press down on it physically.
- mazzeka.com
- Disable Shortcut Labels
- on play / stop functions without pressing a button HOT 1
- how to display notes on keys HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-piano.