# react-rotary-knob

> Skinnable Rotary Knob for React

Latest version **3.0.3** (published 2023-03-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-rotary-knob
pnpm add react-rotary-knob
yarn add react-rotary-knob
bun add react-rotary-knob
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.3 |
| Published | 2023-03-13 |
| First published | 2018-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 3.5 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 160 |
| Author | Hugo Zapata |
| Maintainers | hugozap |
| Keywords | react, knob, dial, slider, rotary, form |

## Links

- npm: https://www.npmjs.com/package/react-rotary-knob
- Repository: https://github.com/hugozap/react-rotary-knob
- Homepage: https://github.com/hugozap/react-rotary-knob#readme
- Issues: https://github.com/hugozap/react-rotary-knob/issues
- npm.io page: https://npm.io/package/react-rotary-knob

## Dependencies (6)

- [uuid](https://npm.io/package/uuid.md) ^3.2.1
- [d3-drag](https://npm.io/package/d3-drag.md) ^3.0.0
- [d3-scale](https://npm.io/package/d3-scale.md) ^4.0.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [react-svgmt](https://npm.io/package/react-svgmt.md) ^2.0.2
- [d3-selection](https://npm.io/package/d3-selection.md) ^3.0.0

## Recent versions

- 3.0.3 (latest) — 2023-03-13
- 3.0.2 — 2023-03-13
- 3.0.1 — 2023-03-13
- 3.0.0 — 2023-03-11
- 2.0.3 — 2023-03-11
- 2.0.2 — 2023-03-11
- 2.0.1 — 2023-03-11
- 2.0.0 — 2023-03-11
- 1.1.8 — 2020-01-31
- 1.1.7 — 2019-10-02
- 1.1.5 — 2019-02-12
- 1.1.4 — 2019-02-04
- 1.1.3 — 2018-11-17
- 1.1.2 — 2018-11-17
- 1.1.1 — 2018-05-02
- … 16 more at https://npm.io/package/react-rotary-knob/versions

## README

# 🎛 React Rotary Knob

[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**

<a href="https://github.com/hugozap/react-svgmt"> <img src="builtwith-svgmt.png"> </a>


## Precision mode

![precision mode](http://hugozap.github.io/react-rotary-knob/img/knob-basic2.gif)

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 <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.

```jsx
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:

| 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/)

---
_Source: https://npm.io/package/react-rotary-knob · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._