John Doe
Reputation: 423
How can I use third js library in react?
I have an open source that wrote in vanilla js library: https://www.openscreen.cz/software/inchlib/home/
I want to import the library to my react project. The inchlib-1.2.0.js file doesn't contain any export functions/variables and it depends on several libraries such as Jquery and Kinetic.
First I tried to put my inchlib-1.2.0.js file into public dir and then add the all three scripts in my index.html
this is the inital code at my inchlib-1.2.0.js file, and I should initate my InCHlib object via this constructor:
var InCHlib;
(function($){
InCHlib = function(settings){
var self = this;
self.user_settings = settings;
self.target_element = $("#" + settings.target);
var target_width = self.target_element.width();
self.target_element.css({"position": "relative"});
.
. // more code
.
}(jQuery));
my index.html:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.0.3.js" integrity="sha256-lCf+LfUffUxr81+W0ZFpcU0LQyuZ3Bj0F2DQNCxTgSI=" crossorigin="anonymous"></script>
<script language="JavaScript" type="text/javascript" src="http://openscreen.cz/software/inchlib/static/js/kinetic-v5.1.0.min.js"></script>
<script src="./inchlib-1.2.0.js" type="text/JavaScript"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>
my App.js component:
import React, { useState, useEffect } from 'react';
import './App.css';
function App() {
useEffect(() => {
var inchlib = InCHlib({"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();
});
return (
<div>
<div>
<div id="inchlib"></div>
</div>
</div>
);
}
I got this error : 'InCHlib' is not defined no-undef
My second attemp was just import the js file via my App component, and put the inchlib-1.2.0.js inside my src dir. but then react cannot load the query script and Kinetic script from my index.html.
src\inchlib\dist\inchlib-1.2.0.js
Line 162:29: '$' is not defined no-undef
Line 565:32: 'Kinetic' is not defined no-undef
Line 570:30: 'Kinetic' is not defined no-undef
Line 578:31: 'Kinetic' is not defined no-undef
Line 589:23: 'Kinetic' is not defined no-undef
Line 597:29: 'Kinetic' is not defined no-undef
Line 602:31: 'Kinetic' is not defined no-undef
Line 608:32: 'Kinetic' is not defined no-undef
Line 615:31: 'Kinetic' is not defined no-undef
Line 620:32: 'Kinetic' is not defined no-undef
Line 626:24: 'Kinetic' is not defined no-undef
Line 634:34: 'Kinetic' is not defined no-undef
Line 639:33: 'Kinetic' is not defined no-undef
Line 645:23: 'Kinetic' is not defined no-undef
Line 649:32: 'Kinetic' is not defined no-undef
Line 660:24: 'Kinetic' is not defined no-undef
Line 686:5: '$' is not defined no-undef
Line 741:7: '$' is not defined no-undef
Line 759:13: 'id' is not defined no-undef
Line 760:22: 'id' is not defined no-undef
Line 768:13: 'id' is not defined no-undef
Line 769:30: 'id' is not defined no-undef
Line 819:57: 'len' is not defined no-undef
Line 819:80: 'len' is not defined no-undef
Line 1069:24: 'Kinetic' is not defined no-undef
Line 1112:30: 'Kinetic' is not defined no-undef
Line 1113:39: 'Kinetic' is not defined no-undef
Line 1125:35: 'Kinetic' is not defined no-undef
Line 1211:30: 'Kinetic' is not defined no-undef
Line 1212:28: 'Kinetic' is not defined no-undef
Line 1233:42: 'Kinetic' is not defined no-undef
Line 1272:16: 'keys' is not defined no-undef
Line 1272:63: 'len' is not defined no-undef
Line 1272:69: 'keys' is not defined no-undef
Line 1272:86: 'len' is not defined no-undef
Line 1273:13: 'keys' is not defined no-undef
Line 1280:16: 'len' is not defined no-undef
Line 1280:44: 'len' is not defined no-undef
Line 1384:9: 'i' is not defined no-undef
Line 1384:16: 'keys' is not defined no-undef
Line 1384:53: 'len' is not defined no-undef
Line 1384:59: 'keys' is not defined no-undef
Line 1384:72: 'i' is not defined no-undef
Line 1384:76: 'len' is not defined no-undef
Line 1384:81: 'i' is not defined no-undef
Line 1385:9: 'node' is not defined no-undef
Line 1385:32: 'keys' is not defined no-undef
Line 1385:37: 'i' is not defined no-undef
Line 1386:12: 'node' is not defined no-undef
Line 1387:23: 'node' is not defined no-undef
Line 1397:13: 'i' is not defined no-undef
Line 1397:20: 'i' is not defined no-undef
Line 1397:49: 'i' is not defined no-undef
Line 1398:27: 'i' is not defined no-undef
Line 1405:13: 'i' is not defined no-undef
Line 1405:20: 'keys' is not defined no-undef
Line 1405:61: 'len' is not defined no-undef
Line 1405:67: 'keys' is not defined no-undef
Line 1405:80: 'i' is not defined no-undef
Line 1405:84: 'len' is not defined no-undef
Line 1405:89: 'i' is not defined no-undef
Line 1406:47: 'keys' is not defined no-undef
Line 1406:52: 'i' is not defined no-undef
Line 1529:32: 'Kinetic' is not defined no-undef
Line 1530:34: 'Kinetic' is not defined no-undef
Line 1543:11: 'key' is not defined no-undef
Line 1544:41: 'key' is not defined no-undef
Line 1545:48: 'key' is not defined no-undef
Line 1552:11: 'y1' is not defined no-undef
Line 1555:101: 'y1' is not defined no-undef
Line 1558:15: 'y1' is not defined no-undef
Line 1558:20: 'y1' is not defined no-undef
Line 1566:41: 'Kinetic' is not defined no-undef
Line 1584:21: 'Kinetic' is not defined no-undef
Line 1692:23: 'width' is not defined no-undef
Line 1693:23: 'x' is not defined no-undef
Line 1693:54: 'width' is not defined no-undef
Line 1694:23: 'y' is not defined no-undef
Line 1695:40: 'x' is not defined no-undef
Line 1695:45: 'y' is not defined no-undef
Line 1723:15: 'width' is not defined no-undef
Line 1724:15: 'x' is not defined no-undef
Line 1724:46: 'width' is not defined no-undef
Line 1725:15: 'y' is not defined no-undef
Line 1726:32: 'x' is not defined no-undef
Line 1726:37: 'y' is not defined no-undef
Line 1735:21: 'Kinetic' is not defined no-undef
Line 1789:19: 'i' is not defined no-undef
Line 1789:26: 'i' is not defined no-undef
Line 1789:44: 'i' is not defined no-undef
Line 1790:39: 'i' is not defined no-undef
Line 1805:18: 'keys' is not defined no-undef
Line 1805:65: 'len' is not defined no-undef
Line 1805:71: 'keys' is not defined no-undef
Line 1805:88: 'len' is not defined no-undef
Line 1806:11: 'leaf_id' is not defined no-undef
Line 1806:21: 'keys' is not defined no-undef
Line 1807:37: 'leaf_id' is not defined no-undef
Line 1811:64: 'leaf_id' is not defined no-undef
Line 1849:22: 'Kinetic' is not defined no-undef
Line 1873:31: 'Kinetic' is not defined no-undef
Line 1881:18: 'len' is not defined no-undef
Line 1881:61: 'len' is not defined no-undef
Line 1885:18: 'len' is not defined no-undef
Line 1885:65: 'len' is not defined no-undef
Line 1897:18: 'len' is not defined no-undef
Line 1897:50: 'len' is not defined no-undef
Line 1967:22: 'Kinetic' is not defined no-undef
Line 1973:24: 'Kinetic' is not defined no-undef
Line 1989:33: 'Kinetic' is not defined no-undef
Line 2009:26: 'Kinetic' is not defined no-undef
Line 2029:35: 'Kinetic' is not defined no-undef
Line 2444:36: 'Kinetic' is not defined no-undef
Line 2516:39: 'Kinetic' is not defined no-undef
Line 2810:28: 'Kinetic' is not defined no-undef
Line 2827:28: 'Kinetic' is not defined no-undef
Line 2853:11: 'filter_list' is not defined no-undef
Line 2864:19: 'filter_list' is not defined no-undef
Line 2864:33: 'filter_list' is not defined no-undef
Line 2868:76: 'filter_list' is not defined no-undef
Line 2910:34: '$' is not defined no-undef
Line 2911:36: '$' is not defined no-undef
Line 2916:19: '$' is not defined no-undef
Line 2920:19: '$' is not defined no-undef
Line 2926:11: '$' is not defined no-undef
Line 2935:14: '$' is not defined no-undef
Line 2937:17: '$' is not defined no-undef
Line 2943:17: '$' is not defined no-undef
Line 2997:17: '$' is not defined no-undef
Line 3026:21: '$' is not defined no-undef
Line 3041:20: '$' is not defined no-undef
Line 3042:20: '$' is not defined no-undef
Line 3051:22: '$' is not defined no-undef
Line 3055:27: '$' is not defined no-undef
Line 3087:7: '$' is not defined no-undef
Line 3114:25: '$' is not defined no-undef
Line 3121:23: '$' is not defined no-undef
Line 3124:18: 'keys' is not defined no-undef
Line 3124:53: 'len' is not defined no-undef
Line 3124:59: 'keys' is not defined no-undef
Line 3124:76: 'len' is not defined no-undef
Line 3125:15: 'keys' is not defined no-undef
Line 3134:18: 'keys' is not defined no-undef
Line 3134:53: 'len' is not defined no-undef
Line 3134:59: 'keys' is not defined no-undef
Line 3134:76: 'len' is not defined no-undef
Line 3135:15: 'keys' is not defined no-undef
Line 3158:7: '$' is not defined no-undef
Line 3159:7: '$' is not defined no-undef
Line 3160:7: '$' is not defined no-undef
Line 3161:7: '$' is not defined no-undef
Line 3162:7: '$' is not defined no-undef
Line 3169:27: '$' is not defined no-undef
Line 3172:20: '$' is not defined no-undef
Line 3173:20: '$' is not defined no-undef
Line 3182:33: '$' is not defined no-undef
Line 3185:22: '$' is not defined no-undef
Line 3218:20: '$' is not defined no-undef
Line 3245:20: '$' is not defined no-undef
Line 3246:20: '$' is not defined no-undef
Line 3255:19: '$' is not defined no-undef
Line 3256:19: '$' is not defined no-undef
Line 3257:7: '$' is not defined no-undef
Line 3342:22: '$' is not defined no-undef
Line 3636:5: '$' is not defined no-undef
Line 3640:7: '$' is not defined no-undef
Any suggestions please?
Upvotes: 1
Views: 271
Answers (1)
yi fan song
Reputation: 427
InCHlib seems to use outdated method of populating a global variable to make itself visible to your application instead of making itself a module. So you can access it with InCHlib or window.InCHlib.
Your first attempt might work if you add a type definition for InCHlib, assuming you are using typescript, preferably put it on window.InCHlib.
Another option that could be possible is to add kinetic and jquery to your npm/yarn modules since those two have been made into modules, and add the correct imports to InCHlib.js and possibly convert InCHlib to a module.
// at the end of InCHlib
module.exports = InCHlib;
Upvotes: 1
Related Questions
- Using a regular JavaScript library inside a React component
- how to add external library to reactjs?
- How do I use/include third party libraries in react?
- React embedding external js library
- How to use html js library inside react app
- How to use react libraries in separate React component script?
- How to import a JS Library within my React app?
- How to include third party js libraries in React app
- Adding other libraries in React.js app
- External libraries in React