react-draggable-svg

A react component add drag events(onDragStart, onDrag...) for SVG elements(g, rect, circle...)

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-draggable-svg
0.0.36 years ago7 years agoMinified + gzip package size for react-draggable-svg in KB

Readme

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

  1. function DraggableSVG(tagName): Component

  1. Draggable.g: Component

props

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