rulers

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

Usage no npm install needed!

<script type="module">
  import rulers from 'https://cdn.skypack.dev/rulers';
</script>

README

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