easy-use-drag

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;