easy-use-drag
v1.0.1
Published
Get the most easiest Drag feature for your npm project.
Downloads
13
Readme
What is Easy UseDrag?
Get the most easiest Drag feature for your npm project.
Preview 👈👈👈
Installation
npm install easy-use-drag
Initial useDrag()
with some options paramiter.
const [mouseDownWidth] = useDrag({
increaseDirection: 'left-to-right',
value: width,
setValue: inlineValueAndStyleChange,
dragEndSetValue: inlineValueAndStyleChange,
identifier: 'width',
valueOffset: 1,
delay: 10
});
This will return a mouse down (mouseDownWidth)
event. You have to put this event in your drag handle.
<div onMouseDown={mouseDownWidth} style={{position: 'absolute', right: 0, top:0, bottom: 0, margin: 'auto'}}>WH</div>
What are those options???
- increaseDirection:
left-to-right
|right-to-left
|top-to-bottom
|bottom-to-top
- value:
initial or state value. (int)
- setValue:
Your callback function when drag happened.
- dragEndSetValue:
Your callback function when drag ended.
- identifier:
Give any identifier or key string for identification.
- valueOffset:
This value will be divided by original value. default value is 1.
- delay:
Throttle delay. Default value is 10.
Example
import React, { useState } from 'react';
import useDrag from 'easy-use-drag';
const UseDragTest = () =>{
const [width, setWidth] = useState(100);
const [height, setHeight] = useState(100);
const inlineValueAndStyleChange = (value, identifier) =>{
if(identifier === 'width'){
setWidth(value)
}else if(identifier === 'height'){
setHeight(value)
}
}
const [mouseDownWidth] = useDrag({
increaseDirection: 'left-to-right',
value: width,
setValue: inlineValueAndStyleChange,
dragEndSetValue: inlineValueAndStyleChange,
identifier: 'width',
valueOffset: 1,
delay: 10
});
const [mouseDownHeight] = useDrag({
increaseDirection: 'top-to-bottom',
value: height,
setValue: inlineValueAndStyleChange,
dragEndSetValue: inlineValueAndStyleChange,
identifier: 'height',
valueOffset: 1,
delay: 10
});
return(
<div style={{width: width, height:height, background:'red', position: 'relative'}}>
<div onMouseDown={mouseDownWidth} style={{position: 'absolute', right: 0, top:0, bottom: 0, margin: 'auto'}}>WH</div>
<div onMouseDown={mouseDownHeight} style={{position: 'absolute', right: 0, left:0, bottom: 0, margin: 'auto'}}>HH</div>
</div>
)
}
export default UseDragTest;