Skip to content

An HTML and SVG draggable components for react written in TypeScript.

Notifications You must be signed in to change notification settings

suhdev/typescript-react-draggable

Repository files navigation

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

About

An HTML and SVG draggable components for react written in TypeScript.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published