Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hugozap/react-rotary-knob
🎛 Skinnable knob for React.
https://github.com/hugozap/react-rotary-knob
knob react slider
Last synced: about 1 month ago
JSON representation
🎛 Skinnable knob for React.
- Host: GitHub
- URL: https://github.com/hugozap/react-rotary-knob
- Owner: hugozap
- License: mit
- Created: 2018-02-13T06:30:13.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-13T16:07:19.000Z (almost 2 years ago)
- Last Synced: 2024-09-28T18:17:50.967Z (3 months ago)
- Topics: knob, react, slider
- Language: TypeScript
- Homepage:
- Size: 5.75 MB
- Stars: 156
- Watchers: 5
- Forks: 21
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎛 React Rotary Knob (React v18.2+)
## Installation
```bash
npm install react-rotary-knob@latest
```
## Demos
[Demo](https://hugozap.github.io/react-rotary-knob/storybook)
[CodeSandbox basic example (uncontrolled)](https://codesandbox.io/s/xo0z2kkqq)
[CodeSandbox custom skin pack](https://codesandbox.io/s/6w9vqn0x3w)
💙 [Get the new skin pack (18 skin set)](https://github.com/hugozap/react-rotary-knob-skin-pack)
## 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
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.
```jsx
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.
```jsx
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.
- [Custom skin pack](https://github.com/hugozap/react-rotary-knob-skin-pack)
- [Custom skins demo (uses flubber to morph paths)](https://hugozap.github.io/react-rotary-knob-custom-skins-demo/)