❤
npm
Sign UpSign In

typescript-react-draggable
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

typescript-react-draggable

A library that provides Draggable and Zoomable React components written in TypeScript:

  1. Draggable: adds drag behavior to its child component given that the child component is an HTMLElement with arbitrary content.
  2. SVGDraggable: adds drag behavior to its child component given that the given component is an SVG component.
  3. Zoomable: adds zoom behavior to HTML components.
  4. SVGZoomable: adds zoom behavior to SVG components.

Dependences

D3: this library uses d3.behavior.drag, and d3.behavior.zoom to add the behavior to react components.

Example

 
import * as React from 'react';
import * as ReactDOM from 'react-dom'; 
import {Draggable} from 'typescript-react-draggable';
 
ReactDOM.render(
    <Draggable>
        <div className="draggable-element">Drag Me</div>
    </Draggable>
,document.getElementById('TestCanvas')); 
 
 
import * as React from 'react';
import * as ReactDOM from 'react-dom'; 
import {SVGDraggable} from 'typescript-react-draggable';
 
ReactDOM.render(
    <SVGDraggable>
        <circle className="draggable-element" />
    </SVGDraggable>,document.getElementById('SVGCanvas')); 
 
//Zoomable 
import * as React from 'react';
import * as ReactDOM from 'react-dom'; 
import {Zoomable} from 'typescript-react-draggable';
 
ReactDOM.render(
    <Zoomable>
        <div className="element-1">Button</div>
        <div className="element-2">Something else</div>
    </Zoomable>
,document.getElementById('TestCanvas')); 
 
 
import * as React from 'react';
import * as ReactDOM from 'react-dom'; 
import {SVGZoomable} from 'typescript-react-draggable';
 
ReactDOM.render(
    <SVGZoomable>
        <circle className="element el-1" />
        <circle className="element el-2" />
    </SVGZoomable>,document.getElementById('SVGCanvas')); 
 
 

Notes

Both Draggable and SVGDraggable do not add extra HTML/SVG elements to the DOM, but rather apply the drag behavior to the wrapped child element.

Future work

  • Allow Draggable component to accept multiple top-level children such that all children receive the behavior.

Suhail Abood © 2016

Readme

Keywords

Package Sidebar

Install

npm i typescript-react-draggable

Repository

github.com/suhdev/typescript-react-draggable

Homepage

github.com/suhdev/typescript-react-draggable#readme

Weekly Downloads

26

Version

1.0.0

License

ISC

Last publish

Collaborators

  • suhail
Try on RunKit
Report malware