CODEWITHSUNDEEP
javascriptjqueryhtmlreactjs
Ali Ahmadi
Ali Ahmadi

Reputation: 741

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

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.

Upvotes: 0

Views: 63

Answers (1)

Alireza Esfahani
Alireza Esfahani

Reputation: 741

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({ ... })
  }

Upvotes: 1

Related Questions