react-transformable-draggable v0.2.1
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!
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago