The library was presented at ReactiveConf 2018, check it out!
I'd like to point out, that this library might be great help when building complex animated UIs. If you need simple things like sorted lists, I recommend you to use one of these instead:
Also, this project is in very early stage of development and the API will most likely change a lot. Main purpose is to demonstrate our use-case and gather feedback, if you wanna achieve something similar. If so, say hi at [email protected] / twitter.com/vojta_prikryl
Coming soon.
DraggableCanvas
| Prop | Type | Description |
|---|---|---|
| getWrapperEl? | () => Maybe | TODO |
| detectScrollEvents? | boolean | TODO |
| detectEdgeDragging? | boolean | TODO |
| onEdgeDragging? | (delta: Coordinates) => void | TODO |
| onElementDragStart? | (id: Id, ev: MouseEvent) => void | TODO |
| onElementDrag? | (id: Id, x: number, y: number) => void | TODO |
| onElementDrop? | (id: Id) => void | TODO |
| onElementDropAnimationEnd? | (id: Id) => void | TODO |
| children | (params: ChildrenFunctionParams) => React.ReactNode | TODO |
DraggableCanvasElement
| Prop | Type | Description |
|---|---|---|
| x | number | TODO |
| y | number | TODO |
| forbidDragging? | boolean | TODO |
| isDragged? | boolean | TODO |
| onDragStart? | (ev: MouseEvent) => void | TODO |
| onDrag? | (x: number, y: number) => void | TODO |
| onDrop? | () => void | TODO |
| preventClickEventAfterDrag? | boolean | TODO |
| children | React.ReactNode | TODO |
Basic example demonstrating how to user DraggableCanvasElement and DraggableCanvas API:
https://codepen.io/aldredcz/project/editor/ZnNMVg
