react-draggable-svg
v0.0.3
Published
A react component add drag events(onDragStart, onDrag...) for SVG elements(g, rect, circle...)
Downloads
39
Readme
<DraggableSVG.x>
Install
npm i react-draggable-svg
Example
import React, { Component } from 'react'
import DraggableSVG from 'react-draggable-svg'
ReactDOM.reander(
<svg>
<DraggableSVG.g
onDragStart={() => console.log('drag start'))}
onDragOver={() => { console.log('on drag over') } }
onDrop={() => { console.log('on drop') }}
>
<rect>
<text>hello world</text>
</rect>
</DraggableSVG.g>
</svg>
)
API
function DraggableSVG(tagName): Component
Draggable.g: Component
props
- renderDragElement: func
Render custom element when dragging. Because <g>
, <rect>
can only show inside <svg>
, so you should custom a svg element wrap this child element
.
License
MIT