0.0.1-alpha.1 • Published 6 years ago
tbd-dnd v0.0.1-alpha.1
tbd-dnd
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 vojta@productboard.com / twitter.com/vojta_prikryl
Docs
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 |
Example
Basic example demonstrating how to user DraggableCanvasElement and DraggableCanvas API:
https://codepen.io/aldredcz/project/editor/ZnNMVg
Preview (click for full version)
0.0.1-alpha.1
6 years ago