2.0.7 • Published 2 years ago

@tradelunch/usedragndrop v2.0.7

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

Simple drag and drop React hook and draggable component

This is a simple react hook to create a draggable component.

Please let me know anything if you need. I will try to work on this Thank you for downloading!!

Example

use cra to create test app

npx create-react-app test-hook-example --template typescript

install hook and use vscode

# move to example folder
cd test-hook-example

npm i @tradelunch/usedragndrop

# open folder with vscode
code .

App.tsx

This code is simple file that I created for example. you can see how to use useDragNDrop hook briefly.

App.module.css

.Box {
    background: #b6b6e5;
    height: 100vh;
    width: 100%;
}

.wrapper:hover {
    will-change: transform, top, left;
}

.Content {
    width: 100px;
    height: 100px;
    background-color: grey;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    border: 2px solid darkgrey;
}

App.jsx with useDragNDrop

import React, { useRef } from "react";
import { useDragNDrop } from "@tradelunch/usedragndrop";
import styles from "App.module.css";

function App() {
    // take event functions, positions, ref and etc.
    const bounds = useRef(null); // you can set bounds inside which a draggable component can move 
    const { onMouseDown, onDragStart, onMouseUp, style, dragRef } =
        useDragNDrop({
            position: "absolute",
            bounds
        });

    return (
        <div
            style={styles.Box}
            bounds={bounds}
        >
            {/* apply them into a dom to make it draggable */}
            <div
                style={styles.Wrapper}
                ref={dragRef}
                // draggable
                onDragStart={onDragStart}
                onMouseDown={onMouseDown}
                onMouseUp={onMouseUp}
            >
                <div style={styles.Content} >
                    <span>Hello Drag!!</span>
                </div>
            </div>
        </div>
    );
}

export default App;

You can use style or top/left value to adjust position what you want

export declare function useDragNDrop(props?: TProps): {
    onMouseDown: (e: any) => void;
    onDragStart: () => false;
    onMouseUp: () => void;
    style: CSSProperties;
    dragRef: import("react").RefObject<HTMLDivElement>;
    top: number;
    left: number;
    isDragging: boolean;
    setIsDragging: import("react").Dispatch<
        import("react").SetStateAction<boolean>
    >;
    position: TPositions;
    shiftX: number;
    shiftY: number;
};

With useDragNDropRxJs

App.module.css

.Box {
    background: #b6b6e5;
    height: 100vh;
	  overflow: scroll;
    width: 100%;
}

height: 100vh; and overflow: scroll; added

App.jsx

import React, { useRef } from "react";
import { useDragNDrop } from "@tradelunch/usedragndrop";
import styles from "App.module.css";

function App() {
    // take event functions, positions, ref and etc.
    const bounds = useRef(null); // you can set bounds inside which a draggable component can move 
    const { ref: dragRef, bounds, pos } = useDragNDropRxJs({ overflow: 'scroll' });

    return (
        <div
            style={styles.Box}
            bounds={bounds}
        >
            {/* apply them into a dom to make it draggable */}
            <div
                style={styles.Wrapper}
                ref={dragRef}
                // draggable
                onDragStart={onDragStart}
                onMouseDown={onMouseDown}
                onMouseUp={onMouseUp}
            >
                <div style={styles.Content} >
                    <span>Hello Drag!!</span>
                </div>
            </div>
        </div>
    );
}

export default App;

with css added above, we need to pass overflow with scroll value.

2.0.3

2 years ago

2.0.2

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.2.15

2 years ago

1.2.0

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.9

2 years ago

1.2.12

2 years ago

1.2.13

2 years ago

1.2.10

2 years ago

1.2.11

2 years ago

1.2.14

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.1

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago