Rulers

Rulers A complete library for building ruler components in any environment such as React, Angular and Vue.js.

Getting Started

Installation

• npm install rulers

PropTypes

| Property | Type | Default | Description | | :------------ | :------- | :----------- | :--------------------- | | handleValue | Function | | get the return value | | canvasWidth | Number | screen width | ruler width | | canvasHeight | Number | 83 | ruler height | | heightDecimal | Number | 35 | scale marks length | | heightDigit | Number | 18 | division marks length | | lineWidth | Number | 2 | marks width | | colorDecimal | String | #E4E4E4 | scale marks color | | colorDigit | String | #E4E4E4 | division marks color | | divide | Number | 10 | division length of px | | precision | Number | 1 | division value | | fontSize | Number | 20 | scale fontSize | | fontColor | String | #666666 | scale fontColor | | fontMarginTop | Number | 35 | font margin to the top | | maxValue | Number | 230 | max value | | minValue | Number | 100 | min value | | currentValue | Number | 100 | current value |

React

import Rulers from 'rulers';

function App() {
    const rulerRef = useRef(null);
    const [state, setState] = useState(50000);

    useEffect(() => {
        renderRuler();
    }, [rulerRef])

    const handleValue = (value) => {
        console.log(value); //return value
        setState(value);
    }

    const renderRuler = () => {
        return new Rulers (
            {
                el: rulerRef.current,
                maxValue: 100000,
                minValue: 0,
                currentValue: state,
                handleValue: handleValue,
                precision: 100
            }
        );
    }

  return (
    <div className="App">

        <div ref={rulerRef} className='container'>
            <h2 className='typeName'>Value</h2>
            <div className='valueContainer'>
                <span className='value'>{state}</span>
            </div>
        </div>
    </div>
  );
}

export default App;

CSS

.App {

}
:root {
  font-size: 100px;
}

.container {
  padding: .1rem 0;
}

.typeName {
  position: relative;
  font-size: .16rem;
  line-height: .4rem;
  text-align: center;

  &:after {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    content: '';
    width: .5rem;
    height: .04rem;
    border-radius: .02rem;
    background-color: #00b0ab;
  }
}

.valueContainer {
  padding-bottom: .04rem;
  text-align: center;
  position: relative;
}

.value {
  padding-right: .04rem;
  font-size: .3rem;
}