How to use it with react ?

[satheesh66]

I am unable to use it with react, @anseki can u help me with this

[anseki]

Hi @satheesh66, thank you for the comment. Could you explain that?

[satheesh66]

I am trying to import plain-draggable with my react component but I can't initialize like

import PlainDraggable from 'plain-draggable'; let draggable = new PlainDraggable(element);

I am getting errors like this Error: plain_draggable_1.default is not a constructor

[anseki]

Was another error thrown?

[satheesh66]

Was another error thrown?

no

[anseki]

Maybe your Webpack script is wrong if another error wan't thrown. You have to import the library from plain-draggable.esm.js file.

[ashvin777]

Here is the sample which you can use to create a React component very easily from the JS library and use it in your React project

Live Demo - https://jsitor.com/tAy-tniLI

import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import Draggable from 'plain-draggable';

function PlainDraggableComponent({ children, draggableProps, ...rest }) {
  const node = useRef();

  useEffect(() => {
    const el1 = node.current;
    new Draggable(el1, draggableProps);
  }, [node]);

  return (
    <div ref={node} {...rest}>{children}</div>
  )
}

function App() {
  return (
    <div className="app">
      <PlainDraggableComponent
        className="node"
        draggableProps={{
          left: 100,
          top: 200
        }}>
        <div>Drag Me!</div>
      </PlainDraggableComponent>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

[anseki]

Hi @ashvin777, thank you for the information. :smile: :+1:

[ashvin777]

Thanks to you for building this amazing lib, I like both LeaderLine and PlainDraggable. I am planning to use these to build the tool like node-red. If there is any suggestion or thoughts then please advise 😊.

[anseki]

Those libraries are used for flowchart, logic tree, organization chart, entity relationship diagram, etc. You can make an issue if you have question.

[satheesh66]

Issue resolved thankyou @anseki and @ashvin777

[anseki]

:smile: