search

satelllte / react-knob-headless

🎛️ Unstyled & accessible knob primitive for React.
https://react-knob-headless.pages.dev
MIT License
54 stars 5 forks source link

Add option to use 'vertical+horizontal' knobs #67

Open Asmatzaile opened 1 month ago

Asmatzaile commented 1 month ago

Closes #66. I set aria-orientation to vertical with knobs that can be dragged both vertically and horizontally because vertical is the default for audio applications. Note that keyboard users could already move any type of knob with all arrow keys (up/down and left/right) independently of the orientation of the knob. This new option brings that same feature to mouse users.

Asmatzaile commented 1 month ago

Rethinking about this issue, maybe the best option would be to leverage use-gesture's axis option to provide the four of its alternatives to the user. So, for backward compatibility (if it's important, even when the project is in beta), the React KnobHeadless component could have a new prop, called axis as well. Its values can be the same as the use-gesture ones, and a value named 'compatibility' could be added and set by default. Then, the actual use-gesture axis would be determined by orientation if the KnobHeadless axis was equal to compatibility.