How can i use a jquery/html/css component inside my react page

Question

I have to use a complex and ready to use component developed using jQuery v2.2.4, javascript html and css inside one of my react pages, because its a fairly huge component with lots of features it really doesn't make sense for us to redevelop this inside react and make it reacty.
So my question is how can i use this inside react?
I simply want to render this component in the middle of my page, whats the best way to do this?, i'm a bit new to this and i don't know where to start.
This is the index.html which calls upon the said component, i thought maybe it helps in someway ?

<!DOCTYPE html>
<html>
<haed>
    <title>Test</title>
</haed>
<body>
    <link href="ol.css" rel="stylesheet" type="text/css" />
    <link href="ls.css" rel="stylesheet" type="text/css" />
    <script src="jquery.min.js"></script>
    <script src="ol.js"></script>
    <script src="ls.js"></script>
    <script src="wss_map.js"></script>
    <div id="map" style="width: 100%; height: 500px;"></div>
<script>
    var i = 0;
    var mp=$("#map").wssmap({
        maps: [
            {
                name: 'm2',
                type: 'osm',
                order: 0,   
                zoomrange: { min: 0, max: 19 },
                visible: true,
            }
        ],
        onClick:function(point) {
            i++;
            var options= {
                longitude:point.longitude,
                latitude:point.latitude,
                label:i
            }
            mp.addMarker(options);
        },
        zoom:10
    });
    var marker=mp.addMarker({ longitude: 51.404343, latitude: 35.715298,label:'Testcase'});
</script>
</body>
</html>

Thanks.

i'd advise against this. like there isn't any reason to do this. but if you must, you should place it componentDidMount() { // place here } or in your useEffect(()=>{ // here },[]) — Rogelio
– Rogelio, Commented Nov 14, 2019 at 8:24
Simple answer is you cannot use. There are lots of third party react components you can replace your jquery component with one of them — mstfyldz
– mstfyldz, Commented Nov 14, 2019 at 8:24
@mstfyldz But this component was developed for a certain client and is really specific to their needs and has lots of feature made simply for that client, creating this in react will take a fair amount of time and resources, plus this is a working component, is there really no option to load this component inside a react page? — Ali Ahmadi
– Ali Ahmadi, Commented Nov 14, 2019 at 8:27
here is a better explanation on how to implement it stackoverflow.com/questions/38518278/… — Rogelio
– Rogelio, Commented Nov 14, 2019 at 8:29

Alireza Esfahani · Accepted Answer · 2019-11-14 08:27:13Z

1

Just follow this instructions:

1: install JQuery via npm : npm install jquery --save

2: import $ from Jquery on top of you react component file: import $ from 'jquery';

3: now you can call your JQuery component on maybe React componentDidMount()

  componentDidMount() {
    var mp=$("#map").wssmap({ ... })
  }

answered Nov 14, 2019 at 8:27

Alireza Esfahani

7417 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ali Ahmadi Over a year ago

Can you take a look at the demo.js inisde codesandbox.io/s/… , am i importing the js files correctly ?, you can use the html in my question for comparison

Alireza Esfahani Over a year ago

No, you must remove import "./jquery.min.js"; line , right?

Ali Ahmadi Over a year ago

To be honest i have never used anything outside of reactjs, so i don't have any experience with jQuery or etc, so i am not sure which line should be removed or imported, is it possible for you to help me with correctly loading this component? maybe using an example?, thank you.

Collectives™ on Stack Overflow

How can i use a jquery/html/css component inside my react page

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related