A simple knob element for react

by React

react-simple-knob

A simple knob element for react.

Installing

$ npm i --save react-simple-knob

or

$ yarn add react-simple-knob

Usage

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

Contributing

To try the component:

$ git clone git@github.com:TimDaub/react-simple-knob.git
$ npm i
$ npm run dev

Current Limitations

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 and unit props
  • [ ] Only very limited styling possible

GitHub

https://github.com/TimDaub/react-simple-knob