react-canvas-knob

jQuery Knob rebuilt with React (no jQuery). This is an HTML5 Canvas-based component that serves as a circular range input. Accepts mouse, touch, scrollwheel, and keyboard input.

Installation

npm install react-canvas-knob --save

Example usage

Please note that react-canvas-knob must be used as a controlled input.

import React from 'react';
import Knob from 'react-canvas-knob';

class MyComponent extends React.Component {
  state = {value: 50};

  handleChange = (newValue) => {
    this.setState({value: newValue});
  };

  render() {
    return (
      <Knob
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }
}

Properties

name	description	default
value	numeric value of knob	n/a
onChange	function to be called on user input with the current numerical value	n/a
onChangeEnd	function to be called on mouseUp or touchEnd with the current numerical value	n/a
min	min value	0
max	max value	100
step	step size	1
log	enable logarithmic scale (must use non-zero min and max, step > 1)	false
width or height	dimension of square (px)	200
thickness	gauge thickness	0.35
lineCap	gauge stroke ending style (butt or round)	'butt'
bgColor	background color	'#EEE'
fgColor	foreground color	'#EA2'
inputColor	text color	fgColor
font	font family	'Arial'
fontWeight	font weight	'bold'
clockwise	direction of progression	true
cursor	use cursor display mode - give width value or true which uses the default cursor width (30)	false
stopper	stop at min & max on keydown/mousewheel	true
readOnly	disable all user input	false
disableTextInput	disable manual text input only	false
displayInput	show numeric input box	true
displayCustom	function that will render your custom component in the centre. (Make sure to set displayInput as false, as that takes priority)	n/a
angleArc	arc size in degrees	360
angleOffset	starting angle in degrees	0
disableMouseWheel	disable changes on mouse wheel use	false
title	adds title attribute to the wheel	value
className	custom className to be applied to the container element	null
canvasClassName	custom className to be applied to the canvas element	null

Contributing

• Make changes to Knob.js, then run npm run babel to transpile.

Todo

• Fix for height > width condition
• Port displayPrevious feature
• Downwards compatibility
• Implement some of the existing pull requests
• Improve manual text input