How Can I Embed Vaniilajs Into React?

Question

I have open source library that I want to use. the library wrote in clean vanilla js: follow their docs, if I want to use the library:

Solution 1:

Depends on what you're gonna do with the library you want to integrate with. Checkout this as a base reference: Integrating with other libraries.

If you're gonna manipulate DOM elements you'll gonna need a reference to them. In this case checkout this: Refs and the DOM.

If the library provides some general logic, you have no problem using it anywhere throughout your code or more specifically in effects.

As inchlib is a visual element library, you'll need to go the first route and get a reference to a specific DOM element. As already noted, checkout Refs from react docs.

Alternative solution is to wrap the whole library usage in your own react component.

Solution 2:

Well If I were to do the same thing then I would paste the script tags as you've done in your html file

<head><scriptsrc="./jquery-2.0.3.min.js"></script><scriptsrc="./kinetic-v5.1.0.min.js"></script><scriptsrc="./inchlib-1.2.0.js"></script><script></head>

For accessing an object into react app, Create a file named Inchlib.js in same directory as is your app.js

Contents of Inchlib.js should be

exportdefaultwindow.InCHlib;

Import the default export into your app.js

importInCHlib from"./inchlib";

functionApp() {
    console.log(InCHlib); // prints the InCHlib objectreturn"hello";
}

Note: Although this should work, there might be a better way to do this. Also using global objects in react code is not usually a preferred option.

Hopefully this would help.

Solution 3:

Just add the Libraries and Scripts you want in the public/index.html file in your react project.

Solution 4:

You can create custom hook with useEffect. In useEffect you should paste your code. You can insert html elements, add event listeners and so on.

useLibrary.jsimport { useEffect } from"react";

constuseLibrary = () => {

  useEffect(() => {
    $.getScript("inchlib-1.2.0.js", function(){
       var inchlib = newInCHlib({"target": "inchlib",
                          "width": 800,
                          "height": 1200,
                          "column_metadata_colors": "RdLrBu",
                          "heatmap_colors": "RdBkGr",
                          "max_percentile": 90,
                          "middle_percentile": 60,
                          "min_percentile": 10,
                          "heatmap_font_color": "white",
                           text: 'biojs'});
      inchlib.read_data_from_file("/microarrays.json");
      inchlib.draw();
      inchlib.onAll(function(name){
          console.log(name + " event triggered");
      });
    });
  }, []);


};

exportdefault useLibrary;


App.jsimport useLibrary from".useLibrary";
exportdefaultclassAppextendsComponent {
  useLibrary();
  render () {
    return (
   <div><divclass="heatmaps"style="margin:auto; align-items: center; margin-left:25%;"><divid="inchlib"></div></div></div>
)
  }
}

But I warn you that this is a big crutch.

JavaScript Download

How Can I Embed Vaniilajs Into React?

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "How Can I Embed Vaniilajs Into React?"