Integrating jsPlumb in React

Question

Need to implement jsPlumb in react and I have analysed that jsPlumb with react integration is licensed ReactjsPlumb.

I need open source plugin which works as jsPlumb in react and and tried the below:

I'm unable to use these plugin's since both plugin's are written in TypeScript. Is there are any other plugins available like jsPlumb in react with pure react functionality.

Somehow, added jsPlumb community version in react like below:

class App extends Component {
     componentDidMount() {

       //later we use like that , is this recommended ?

       // $(".item").resizable({
       //     resize : function(event, ui) {            
       //             jsPlumb.repaint(ui.helper);
       //         },
       //         handles: "all"
       //     });

        jsPlumb.ready(function() {
               jsPlumb.connect({
                   source:"item_left",
                   target:"item_right",
                   endpoint:"Rectangle"
               });

               jsPlumb.draggable("item_left", {containment:"parent"});
               jsPlumb.draggable("item_right", {containment:"parent"});
           });
     }

     render() {
       return (
         <div id="diagramContainer">
           <div id="item_left"  className="item"></div>
           <div id="item_right" className="item" 
           style={{marginLeft:"150px"}}></div>
       </div>
       );
     }
   }

I don't know that, using jsPlumb (javascript + jQuery) with react will be a wiser choice, because jsPlumb handles drag and drop internally and handling DOM directly. React is different.This feels somehow like a deadlock... Any suggestions?

Have you got the solution ? If not, then I give the solutio in the answer section. — Lex Soft, Feb 08 '20 at 02:47

score 0 · Answer 1 · answered Sep 25 '18 at 11:59

Wrapping jQuery plugins with React is not always the best choice. However, it is nice to know that it is an option and how you can implement a solution. It is a viable option if you are migrating a legacy jQuery application to React or maybe you just can't find a React plugin that suits your needs in your case.

check this answer for detailed explanation

score 0 · Answer 2 · answered Feb 08 '20 at 03:09

When trying the library to be used in my React application, by looking at the console, I find that the jsPlumb variable is an object that has several properties. One of the property is jsPlumb itself. So I think, everytime we need to access the jsPlumb and its methods/properties, we have to write the code like so :

jsPlumb.jsPlumb.ready(function() {
    jsPlumb.jsPlumb.connect({
        source:"item_left",
        target:"item_right",
        endpoint:"Rectangle"
    });

    jsPlumb.jsPlumb.draggable("item_left", {containment:"parent"});
    jsPlumb.jsPlumb.draggable("item_right", {containment:"parent"});
});

I have creates an example in codesandbox : jsPlumb example. The code is taken from official source : jsPlumb demo in github. I only integrated them in React component, so credit is still for the guys who wrote the source code. We can only enjoy their creation for our React application. Btw, I am still learning the library.

Integrating jsPlumb in React

2 Answers2