Hc React Ruler

Installation

npm

1$ npm i hc-react-ruler

🚀 How to use

1import React from 'react';
2import { render} from 'react-dom';
3import Ruler from 'hc-react-ruler';
4const Config = {
5  rate: 1.5,
6  height: 50,
7  start: 0,
8  end: 100,
9  capacity: 1,
10  unit: 15,
11  centerLine: { linecolor: '#3ECEB6', width: '1', height: '0.8'},
12  scaleplate: { color: '#D8D8D8', fontsize: '14', width: '1', fontcolor: '#D8D8D8', halfLineHeight: '0.4', lineHeight: '0.3', fullLineHeight: '0.6'},
13  value: 10
14}
15class App extends React.Component {
16  constructor(props) {
17    super(props);
18    this.state = {
19      value: 0,
20    }
21    this.changeVal = this.changeVal.bind(this);
22  }
23  changeVal(e) {
24    let val = e.target.value;
25    const reg = /^[0-9]*$/;
26    if (!reg.test(val)) {return false};
27    val = parseInt(val, 10);
28    if (val > Config.end) {
29      val = Config.end;
30    };
31    if ( val < Config.start || !val) {
32      val = Config.start;
33    };
34    this.setState({
35      value: val,
36    });
37  }
38  render() {
39    const { value } = this.state;
40    return (
41      <div className="wrapper">
42        <input value={value} onChange={this.changeVal}/>
43        <Ruler {...Config} value={value} onChange={(val) => {this.setState({value: val})}} />
44      </div>
45    );
46  }
47}
48render(<App />, document.getElementById("root"));
49

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!