Reactablejs = Reactjs + Interactjs
A react high-order component for interactjs.
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
Installation
reactablejs
useinteractjs
aspeerDependencies
, you should also install interactjs.
npm install reactablejs interactjs --save
Usage
import React from 'react'
import reactable from 'reactablejs'
const MyComponent = (props) => {
return <div ref={props.getRef}>
hello, world!
</div>
}
// 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