https://github.com/suhdev/typescript-react-draggable

An HTML and SVG draggable components for react written in TypeScript.
https://github.com/suhdev/typescript-react-draggable

Last synced: about 1 year ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/suhdev/typescript-react-draggable
• Owner: suhdev
• Created: 2016-08-02T18:27:57.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2016-12-26T23:20:50.000Z (over 9 years ago)
• Last Synced: 2025-03-11T23:36:54.541Z (over 1 year ago)
• Language: JavaScript
• Size: 47.9 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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

```javascript

import * as React from 'react';

import * as ReactDOM from 'react-dom'; 

import {Draggable} from 'typescript-react-draggable';

ReactDOM.render(

    

        
Drag Me

    

,document.getElementById('TestCanvas')); 


import * as React from 'react';

import * as ReactDOM from 'react-dom'; 

import {SVGDraggable} from 'typescript-react-draggable';

ReactDOM.render(

    

        

    ,document.getElementById('SVGCanvas')); 

//Zoomable 

import * as React from 'react';

import * as ReactDOM from 'react-dom'; 

import {Zoomable} from 'typescript-react-draggable';

ReactDOM.render(

    

        
Button

        
Something else

    

,document.getElementById('TestCanvas')); 


import * as React from 'react';

import * as ReactDOM from 'react-dom'; 

import {SVGZoomable} from 'typescript-react-draggable';

ReactDOM.render(

    

        

        

    ,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