/reactablejs

A react high-order component for interact.js(drag and drop, resizing and multi-touch gestures).

Primary LanguageTypeScriptMIT LicenseMIT

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 use interactjs as peerDependencies, 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