How to user Jquery s Plugin Mondial relay in react js properly

Question

I am a MERN Developer trying to implement Jquery's Plugin "Mondial Relay" in my react app for a big size project on client's demand. But the problem is that the plugin is NOT working in react app and giving error

MR_ParcelShopPicker is not a function

while it works on developer tools' console

I've prepared a codesandbox for this

I have also includes mondial relay's script in Index.html

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    
    <script src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script>

</body>

the code is :

const MondialRelay = () => {
  useEffect(() => {
    const jQuery = document.createElement("script");
    jQuery.src =
      "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
    jQuery.async = "true";

    document.body.appendChild(jQuery);

    return () => {
      document.body.removeChild(jQuery);
    };
  });

  useEffect(() => {
    const scriptMr = document.createElement("script");
    scriptMr.src =
      "https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js";
    scriptMr.async = "true";

    document.body.appendChild(scriptMr);

    return () => {
      document.body.removeChild(scriptMr);
    };
  });

  const call = () => {
    try {
      /* Run this on developer tools console
      Mondial Relay Dialog will be shown
        $("#Zone_Widget").MR_ParcelShopPicker({
        Target: "#ParcelShopCode",
        Brand: "BDTEST  ",
        Country: "FR"
      });


      */
      $("#Zone_Widget").MR_ParcelShopPicker({
        Target: "#ParcelShopCode",
        Brand: "BDTEST  ",
        Country: "FR"
      });
    } catch (err) {
      console.log(`err`, err);
    }
  };

  (function () {
    // Parameterized the widget
    try {
      call();
    } catch (err) {
      console.log(`err`, err);
    }
  })();

  return (
    <div>
      <Button variant="contained" onClick={call}>
        Call
      </Button>
      <div id="Zone_Widget"></div>
      <div id="ParcelShopCode"></div>
    </div>
  );
};

rajatha · Answer 1 · Aug 8, 2022

Import them (along with jQuery) into the file where your component would be.

import $ from 'jquery';
import './css/jCirclize.css';
import './js/jCirclize.js';

We create a new component called <Percentage/> and arrange the code for using a jQuery plugin similar to what is documented in React's official site here. The plugin is destroyed inside the componentWillUnmount() method, which happens whenever the user moves away from the component. There is a callback ref referencing the <div> element.

Also read: How To Use jQuery with React.js Properly