React-input-number-editor-more NPM

react-input-number-editor-more

React component that act like adobe suite editor number input field that can be slided.

Demo

Preview Image

Live demo available here

示例代码

Features

Mouse lock on drag
Custom number decimal precision
Manual editing of the input
Editing cancellation
Increment/decrement the value with arrow up and arrow down key
Use ctrl and shift key to increment/decrement the value with higher/lesser step
Change the value from external event
Customize the step modifier for ctrl and shift key
Customize the slide modifier for dragging accuracy

Install

npm install --save react-input-number-editor-more

yarn add react-input-number-editor-more

Example

import React, { useState } from 'react';

import InputNumberEditor from 'react-input-number-editor-more';

function Example() {
    const [value, setValue] = useState(0);

    function handleChange(value) {
        setValue(value);
    }

    return (
        <InputNumberEditor
            value={value}
            min={0}
            max={100}
            precision={1}
            onChange={handleChange}
        />
    );
}

Usage

Prop	Description	Type	Default	Required
value	The value to set the input to	number	0	Yes
min	The minimum value reachable	number	-	No
max	The maximum value reachable	number	-	No
precision	Number of decimals	number	0	No
step	Number of the stepping	number	1	No
stepModifier	Modifier for the stepping (Ctrl and Shift key)	number	10	No
slideModifier	Modifier for the sliding/dragging mode	string	0.3	No
onChange	Callback called on value change。参数为一个对象{newInternalValue,event,moveNumbers:{movementX,movementY}}。newInternalValue：拖拽得到的最新值。movementX：鼠标在x轴每一次移动的距离；movementY：鼠标在y轴每一次移动的距离。	func	() => ()	No
mouseSpeed	调整鼠标速度	number	1	No
showInput	是否显示input框，只有在当前组件有子组件的情况下生效（有时我们并不需要input元素）	Boolean	true	No
doubleSpeed	当鼠标在y方向翻页时自动调节数字改变速度	number	1	No
onMouseUp	鼠标事件，返回参数event	function		No
onMouseDown	鼠标事件，返回参数event	function		No
onMouseMove	鼠标事件，返回参数是一个对象{ moveNumbers: { movementX: movementX mouseSpeed, movementY: movementY mouseSpeed, }, event }	function		No