3.0.3 ā€¢ Published 1 year ago

react-rotary-knob v3.0.3

Weekly downloads
610
License
MIT
Repository
github
Last release
1 year ago

šŸŽ› 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 <Knob onChange={this.changeValue.bind(this)} min={0} max={100} value={this.state.value}/>
     
  }
}

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 <Knob defaultValue={0} min={0} max={100} onChange={this.changeValue.bind(this)}  />
  }
}

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:

PropDescriptionDefault Value
minMinimum value0
maxMaximum value100
valueControl Value0
defaultValuestart value for uncontrolled mode0
onChangeCallback with the updated value
unlockDistanceMinimun drag distance required to unlock the knob100
stepthe step distance (when using the keyboard arrows)1
skinSkin object
onStartCalled when the dragging starts
onEndCalled when the dragging ends
clampMindegree value to move the starting point of the active area of the knob away from the center0
clampMaxdegree value to move the end point of the active area of the knob away from the center360
rotateDegreesdegree value to rotate the knob component to have the starting / end points at a different position0 (zero is at top

Custom skins

See defaultSkin.js for an example.

2.0.3

1 year ago

2.0.2

1 year ago

2.0.1

1 year ago

2.0.0

1 year ago

3.0.3

1 year ago

3.0.2

1 year ago

3.0.1

1 year ago

3.0.0

1 year ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.13

6 years ago

1.0.12

6 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.0.1

6 years ago