react-transformable-draggable

$3

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


$3

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

$3

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

const renderItem = (



CLICK ME

TO ADD


)

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 (

{renderItems.map(({ id, renderItem }) => (

{renderItem}

))}

onDelete={onDelete}
onHoverStart={onHoverStart}
onHoverEnd={onHoverEnd}
>

DRAG HERE TO DELETE

DRAG ME

TO ADD

onClick={() =>
setRenderItems([...renderItems, { renderItem, id: _.uuid() }])
}
>

CLICK ME

TO ADD

``

$3

| 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 |

$3