beizhedenglong/reactablejs

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

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

• visit storybooks

reactablejs's Issues

Make only background div draggable

I have a modal that pops up which has textboxes inside it. The problem is, when attempting to highlight text in that popup modal, it drags the window instead of highlighting. Can I make it so it ignores when dragging on objects inside the div, and only move when the div itself is dragged? Right now it seems to apply to an entire component only.

<BanModalReactable
                   loadBans={loadBans}
                   draggable={{
                       cursorChecker: () => "default",
                       modifiers: [
                           interact.modifiers.restrictRect({
                               restriction: 'parent',
                               endOnly: true
                           })
                       ]
                   }}
                   onDragMove={(event) => {
                       const { dx, dy } = event;
                       setBanModalCoord((prev) => ({
                           x: prev.x + dx,
                           y: prev.y + dy,
                       }));
                   }}
                   x={banModalCoord.x}
                   y={banModalCoord.y}
               />

How to change cursor on draggable component

When I have a draggable component, it puts a 4-way arrow cursor over that div, but I don't want that to happen. How can I disable this? I've checked the docs for reactablejs and interactjs, but cannot figure out how to do it. Could I get some help?

Newbie: Can't get reactable to work

I'm new to React and I can't manage to get reactablejs to work, here is my attempt at implementing the example code:
https://github.com/eliasericsson/reactable-example

This is the error I'm getting:
./node_modules/reactablejs/dist/index.mjs
Can't import the named export 'Component' from non EcmaScript module (only default export is available)

I apologize if I've missed something fundamental.

Stale react state

Hi,
I appreciate the work you have done with this project and I would like to ask if I could help you with the library.
One of the issues which I found is that the event handlers use a stale React state. I know that there is a workaround by using useRef(). However, this gets complicated when using Redux and leads to duplicate data.
I solved this for the events by refactoring the code to React hooks. Meanwhile I also updated the npm dependancies.
You can find my changes here: npm-updates-and-using-react-hooks
I could create a pull request.

Using interactjs modifiers with reactablejs

Hi,
I'm using reactablejs and really appreciate the easy handling! I've already a working app in place where I can move and rotate some elements on my screen. These elements live in a surrounding DIV. My next step would be to restrict the drag-area to this DIV. In the interact.js documentation I can see that the restrict modifier would do the job. But: I cannot see reactablejs exposing the modifiers feature yet.
Am I right - is reactablejs not capable of using modifiers at the moment? Do you have this on your roadmap? Would you appreciate to get a PR for this feature?

fix import location for DraggableOptions, DropzoneOptions, ResizableOptions

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

The imports for DraggableOptions, DropzoneOptions, ResizableOptions could not be resolved.

Here is the diff that solved my problem:

diff --git a/node_modules/reactablejs/dist/src/index.d.ts b/node_modules/reactablejs/dist/src/index.d.ts
index 4645aea..bd8f173 100644
--- a/node_modules/reactablejs/dist/src/index.d.ts
+++ b/node_modules/reactablejs/dist/src/index.d.ts
@@ -1,12 +1,15 @@
+import { DraggableOptions } from '@interactjs/actions/drag/plugin';
+import { DropzoneOptions } from '@interactjs/actions/drop/plugin';
+import { ResizableOptions } from '@interactjs/actions/resize/plugin';
 import * as React from 'react';
 export interface InjectedProps {
     getRef: React.Ref<string> | React.LegacyRef<string>;
 }
 export interface InteractProps {
-    draggable?: Interact.DraggableOptions | boolean;
-    resizable?: Interact.ResizableOptions | boolean;
-    gesturable?: Interact.ResizableOptions | boolean;
-    dropzone?: Interact.DropzoneOptions | boolean;
+    draggable?: DraggableOptions | boolean;
+    resizable?: ResizableOptions | boolean;
+    gesturable?: ResizableOptions | boolean;
+    dropzone?: DropzoneOptions | boolean;
     onDragStart?: Interact.ListenersArg;
     onDragMove?: Interact.ListenersArg;
     onDragEnd?: Interact.ListenersArg;

This issue body was partially generated by patch-package.