A simple knob element for react.
$ npm i --save react-simple-knob
or
$ yarn add react-simple-knob
Import the component
import Knob from "react-simple-knob";
and then use it:
function App() {
const style = {
margin: "20%",
height: "100px",
fontFamily: "Arial",
color: "white" // Sets font color of value and knob name
};
return (
<Knob
name="Volume"
unit="dB"
defaultPercentage={0.7}
onChange={console.log}
bg="black"
fg="white"
mouseSpeed={5}
transform={p => parseInt(p * 50, 10) - 50}
style={style} />
);
}
To try the component:
$ git clone git@github.com:TimDaub/react-simple-knob.git
$ npm i
$ npm run dev
Any help is very much appreciated. I'll try to merge your PRs as soon as I can! The following things could be improved:
- Component doesn't scale automatically based on
name
andunit
props - Only very limited styling possible
- Bugfix: Fix Arc background
- Make
fontSize
configurable usingstyle
props
- Bugfix: Make style options (
color
andfontFamily
) optional
- Allow very limited styling
- Bugfix: Fix
defaultPercentage
prop
- Initial release
MIT