https://github.com/timdaub/react-simple-knob
A simple knob element for react
https://github.com/timdaub/react-simple-knob
component element knob react
Last synced: 10 months ago
JSON representation
A simple knob element for react
- Host: GitHub
- URL: https://github.com/timdaub/react-simple-knob
- Owner: TimDaub
- License: mit
- Created: 2019-12-11T18:24:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T02:49:03.000Z (about 3 years ago)
- Last Synced: 2024-12-19T21:19:25.189Z (about 1 year ago)
- Topics: component, element, knob, react
- Language: JavaScript
- Size: 2.32 MB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-simple-knob
[](https://badge.fury.io/js/react-simple-knob)
> A simple knob element for react.
## Installing
```bash
$ npm i --save react-simple-knob
```
or
```bash
$ yarn add react-simple-knob
```
## Usage
Import the component
```js
import Knob from "react-simple-knob";
```
and then use it:
```js
function App() {
const style = {
margin: "20%",
height: "100px",
fontFamily: "Arial",
color: "white" // Sets font color of value and knob name
};
return (
parseInt(p * 50, 10) - 50}
style={style} />
);
}
```
## Contributing
To try the component:
```bash
$ 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
## Changelog
### 0.0.6
- Bugfix: Fix Arc background
### 0.0.5
- Make `fontSize` configurable using `style` props
### 0.0.4
- Bugfix: Make style options (`color` and `fontFamily`) optional
### 0.0.3
- Allow very limited styling
### 0.0.2
- Bugfix: Fix `defaultPercentage` prop
### 0.0.1
- Initial release
## License
MIT