https://github.com/beizhedenglong/reactablejs
A react high-order component for interact.js(drag and drop, resizing and multi-touch gestures).
https://github.com/beizhedenglong/reactablejs
drag drag-and-drop interactjs react resize touchscreen
Last synced: about 1 year ago
JSON representation
A react high-order component for interact.js(drag and drop, resizing and multi-touch gestures).
- Host: GitHub
- URL: https://github.com/beizhedenglong/reactablejs
- Owner: beizhedenglong
- License: mit
- Created: 2018-03-08T12:32:18.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-12-23T04:49:10.000Z (over 4 years ago)
- Last Synced: 2025-03-28T04:41:56.777Z (about 1 year ago)
- Topics: drag, drag-and-drop, interactjs, react, resize, touchscreen
- Language: TypeScript
- Homepage: https://beizhedenglong.github.io/reactablejs/
- Size: 1.3 MB
- Stars: 65
- Watchers: 4
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Reactablejs = Reactjs + Interactjs
A react high-order component for [interactjs](https://github.com/taye/interact.js).
Current supported features:
- drag
- resize
- drop
- multi-touch
- restrict
- snap
- modifiers
Current supported props:
- options: `draggable` `resizable` `gesturable` `dropzone`.
- event handlers: `onDragStart` `onDragMove` `onDragInertiaStart` `onDragEnd` `onResizeStart` `onResizeMove` `onResizeInertiaStart` `onResizeEnd` `onGestureStart` `onGestureMove` `onGestureEnd` `onDropActivate` `onDropdEactivate` `onDragEnter` `onDragLeave` `onDropMove` `onDrop` `onDown` `onMove` `onUp` `onCancel` `onTap` `onDoubleTap` `onHold`.
**api details, visit [interactjs' docs](http://interactjs.io/docs/)**
## Installation
> `reactablejs` use `interactjs` as `peerDependencies`, you should also install interactjs.
```
npm install reactablejs interactjs --save
```
## Usage
```js
import React from 'react'
import reactable from 'reactablejs'
const MyComponent = (props) => {
return
hello, world!
}
// MyComponent will receive getRef in props, put getRef to the element you want interact, then you can use all options and event handlers on Reactable
const Reactable = reactable(MyComponent)
```
## Example
- visit [storybooks](https://beizhedenglong.github.io/reactablejs/)