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