@baldwinbarry/react-knob
Knob component built with React. Inspired by a codepen by Ed Hicks.
Installation
npm
npm install @baldwinbarry/react-knob --saveyarn
yarn add @baldwinbarry/react-knob Properties
| Property | Default | Description |
|---|---|---|
| value | Current knob value | |
| onChange | Function to call when value changes | |
| minValue | 0 | Minimum knob value |
| maxValue | 255 | Maximum knob value |
| minLabel | Min | Minimum label |
| maxLabel | Max | Maximum label |
| minMaxLabels | true | Render min/max labels |
| ticks | 28 | Number of ticks |
| keyStepPct | 10 | Percent increase/decrease for key events |
| className | Override styles | |
| label | Text to render below knob |
Example
import React, { useState } from 'react'
import ReactKnob from '@baldwinbarry/react-knob'
const Example = () => {
const [volume, setVolume] = useState(0)
return (
<ReactKnob value={volume} onChange={setVolume} />
)
}
export default Example
Styling: Size
By default, the knob component renders inside a 200px square container. Control the size of the knob by overriding width and height rules on the knob-container class:
.my-knob {
.knob-container {
width: 150px;
height: 150px;
}
}
<ReactKnob className="my-knob" />
###Styling: Color Change knob colors by overriding CSS custom properties. Color values must be provided as comma-separated RGB values.
| Property | Default | Description |
|---|---|---|
| --color-knob-dial | 24, 24, 24 | Dial color |
| --color-knob-light | 168, 216, 248 | Color of active ticks and knob light |
| --color-knob-tick | 200, 200, 200 | Color of inactive ticks |
| --color-knob-label | 200, 200, 200 | Color of knob labels |
.my-knob {
__color-knob-light: 255, 0, 0;
}
<ReactKnob className="my-knob" />