aiws-react-dnd

    0.0.13 • Public • Published

    Super simple drag-n-drop library for react developers

    CircleCI npm version

    tldr; There is no fancy thing in this library compares to others. I just find myself difficult to understand react-dnd and react-beautiful-dnd. They are both amazing with plenty of features and supports. I need a library that allows me to apply drag-n-drop quickly and with my customization, if there is any error, I won't spend too much time to understand the library. So I wrote this library. It's basically using a cloned DOM for moving affect and improving the speed by caching all the boundaries in rbush tree.

    Demo

    https://aiwsolutions.github.io/react-drag-drop/

    Local Demo

    npm install
    npm run serve
    

    then navigate to http://localhost:8080

    Production

    https://lackid.com

    Usage

    npm install --save aiws-react-dnd
    

    Draggable

        <Draggable
            uniqueId={1}
            onDragStart={f => f}
            type="draggable"
        >
            {
                handers =>
                    <div
                        {...handlers}
                    >
                        Draggable Content
                    </div>
            }
        </Draggable>
    
    Property Type Description
    uniqueId any (Required) The unique id for this Draggable element. It needs to be globally unique for the whole application (both Draggable & Droppable) because the library does cache the boundary of it, for performance improvement.
    handle string (Optional CSS selector) If exists, then the drag can only be started if the click was on the matched child element (inside the element).
    skip string (Optional CSS selector) If exists, the drag will be skipped if the click was on this matched element.
    type string (Required) The type of this element, this is for Droppable to accepts if it was overred.
    onDragStart func (Required) This function will be called before the dragging happens, it must returns a data for further communication with others Draggable/Droppable otherwise the drag action is discarded.
    onDrag func (Optional) This function will be called on every movement. Returns false to discard the movement.
    onDrop func (Optional) This function will be called on releasing mouse.
    onPressed func (Optional) If there is no movement, this function will be called when there are mouse down and up.
    onRendered func (Optional) This function will be called on componentDidUpdate, componentDidMount of the element and on dragging.
    onUnmount func (Optional) This function will be called on componentWillUnmount of the element.

    Droppable

        <Droppable
            uniqueId='a'
            onDraggedSourceOverred={handleAddItemToThis}
        >
            {
                hovered =>
                    <div
                        style={{
                            hovered ? '1px 1px 2px 1px rgba(0,0,0,0.4)' : 'none',
                        }}
                    >
                        Container
                    </div>
            }
        </Droppable>
    
    Property Type Description
    uniqueId any (Required) The unique id for this Draggable element. It needs to be globally unique for the whole application (both Draggable & Droppable) because the library does cache the boundary of it, for performance improvement.
    acceptTypes array of string (Optional) List of types of Draggable that this Droppable will accept. If not provided or empty array, then all types will be accepted
    onDraggedSourceOverred func (Optional) This function will be called when there is a matched type (acceptTypes) of Draggable was dragged on this element. Return a non-false value to accept the element.
    onDraggedSourceOuted func (Optional) This function will be called if its child element was dragged out of itself.
    onRendered func (Optional) This function will be called on componentDidUpdate, componentDidMount of the element.
    onUnmount func (Optional) This function will be called on componentWillUnmount of the element.

    Notice

    This library is scallable when using with aiws-elm. MIT

    Install

    npm i aiws-react-dnd

    DownloadsWeekly Downloads

    3

    Version

    0.0.13

    License

    MIT

    Unpacked Size

    2.5 MB

    Total Files

    32

    Last publish

    Collaborators

    • aiwsolutions