react-transformable-draggable

react-transformable-draggable

Description

A set of component wrappers to make any component or element draggable, droppable, and transformable.

Installation

$ npm install react-transformable-draggable
$ yarn add react-transformable-draggable

Example Usage

import React, { useState } from 'react'
import _ from 'lodash-uuid'
import {
    DeleteTarget,
    DndProvider,
    Droppable,
    Transformable,
    TransformableTarget,
} from 'react-transformable-draggable'
...

const renderItem = (
    <div className="app-render-item">
        CLICK ME
        <img src={logo} className="app-logo" alt="logo" />
        TO ADD
    </div>
)

export const Example = () => {
    const [deleteClassName, setDeleteClassName] = useState('app-delete-target')
    const [renderItems, setRenderItems] = useState([])

    const onDelete = (id, type) => {
        console.log('deleted type: ', type)
        const updatedRenderItems = renderItems.filter(item => item.id !== id)

        setRenderItems(updatedRenderItems)
    }

    const onHoverEnd = () => {
        setDeleteClassName('app-delete-target')
    }

    const onHoverStart = () => {
        setDeleteClassName('app-delete-target--hover')
    }

    return (
        <div className="app">
            <DndProvider>
                <TransformableTarget className="app-transformable-target">
                    {renderItems.map(({ id, renderItem }) => (
                        <Transformable key={id} id={id} type="CLICK_TO_ADD">
                            {renderItem}
                        </Transformable>
                    ))}
                </TransformableTarget>
                <div className="app-toolbar">
                    <DeleteTarget
                        onDelete={onDelete}
                        onHoverStart={onHoverStart}
                        onHoverEnd={onHoverEnd}
                    >
                        <div className={deleteClassName}>DRAG HERE TO DELETE</div>
                    </DeleteTarget>
                    <div className="app-add-items">
                        <Droppable type="DRAG_TO_ADD">
                            <div className="app-render-item">
                                DRAG ME
                                <img src={logo} className="app-logo" alt="logo" />
                                TO ADD
                            </div>
                        </Droppable>
                        <div
                            onClick={() =>
                                setRenderItems([...renderItems, { renderItem, id: _.uuid() }])
                            }
                        >
                            <div className="app-render-item">
                                CLICK ME
                                <img src={logo} className="app-logo" alt="logo" />
                                TO ADD
                            </div>
                        </div>
                    </div>
                </div>
            </DndProvider>
        </div>
    )
}

Props

Prop	Default	Description	Required
boundingBoxStyle	undefined	Override default boundingBox styling. Color/thickness set with css border property.	No
boundingBoxStyleMobile	undefined	Override default boundingBox styling on mobile devices. Color/thickness set with css border property.	No
hideBoundingBox	false	Hides the bounding box	No
hideHandles	false	Hides the resize and rotation handles.	No
initialPosition	'center'	Initial position for progrmatically added elements (non drag & drop). An object of the form {top, left} with values relative to the TransformableTarget container, or a string equal to one of the following: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center', 'left', 'right'	No
lockAspectRatio	false	Locks the element's aspect ratio to that of the initial render.	No
minWidth	70	Minimum resize width of the element.	No
minHeight	70	Minimum resize height of the element.	No
resizeHandleStyle	undefined	Override default resize handle styling. Color set with css background-color property, width/height set with CSS width/height property.	No
resizeHandleStyleMobile	undefined	Override default resize handle styling on mobile devices. Color set with css background-color property, width/height set with CSS width/height property.	No
rotateHandleStyle	undefined	Override default rotate handle styling. Color set with css fill property, width/height set with CSS width/height property.	No
rotateHandleStyleMobile	undefined	Override default rotate handle styling. Color set with css fill property, width/height set with CSS width/height property.	No

PRs Welcome!