Need help with react-rotary-knob?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

hugozap
135 Stars 15 Forks MIT License 110 Commits 24 Opened issues

Description

🎛 Skinnable knob for React.

Services available

!
?

Need anything else?

Contributors list

# 223,605
React
JavaScr...
CSS
tableau
90 commits
# 183,244
Arduino
flash
arduino...
CSS
7 commits
# 5,123
Common ...
kali-li...
honeypo...
rfi
1 commit
# 724,225
React
knob
JavaScr...
1 commit

🎛 React Rotary Knob

Demo

CodeSandbox basic example (uncontrolled)

CodeSandbox custom skin pack

💙 Get the new skin pack (18 skin set)

Features

  • Precise mode: Doesn't jump on dragging (Increase drag distance for more precision)
  • Works in both controlled (recommended) and uncontrolled mode.
  • Support arrow keys.
  • Supports custom skins

Precision mode

precision mode

When precision mode is active (default), a minimum dragging distance is required to unlock de control.

Usage (Controlled mode - recommended)

Similar to controlled mode for HTML input controls, you need to store the value and use the

value
and
onChange
props to update it. This is the recommended usage.
class App extends React.Component {

state = { value: 50 }

changeValue(val) { this.setState({value:val}) }

render() { return

} }

Usage (Uncontrolled mode)

In uncontrolled mode the component manages its own state. Instead of providing a

value
prop you should define a default value with the
defaultValue
prop. Use the
onChange
prop if you want to be notified when the value changes.
class App extends React.Component {

changeValue(val) { console.log('The value changed to '+val) }

render() { return } }

Non-endless behavior

For some applications it's not a good idea to jump from min to max values. If you need to limit the rotation take a look at this implementation of a limited knob

https://codesandbox.io/s/qvyyyvv346

Api

Props:

| Prop | Description | Default Value | |-----|--------------|----| | min | Minimum value| 0 | | max | Maximum value| 100 | | value | Control Value | 0 | | defaultValue | start value for uncontrolled mode | 0 | | onChange | Callback with the updated value | | | unlockDistance | Minimun drag distance required to unlock the knob | 100 | | step | the step distance (when using the keyboard arrows) | 1 | | skin | Skin object| | | onStart | Called when the dragging starts | | onEnd | Called when the dragging ends | | clampMin | degree value to move the starting point of the active area of the knob away from the center | 0 | | clampMax | degree value to move the end point of the active area of the knob away from the center | 360 | | rotateDegrees | degree value to rotate the knob component to have the starting / end points at a different position | 0 (zero is at top |

Custom skins

See defaultSkin.js for an example.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.