How to use JQuery UI in React App

ReactJs is one of the most popular javascript formwork in web development. Since It has internal algorithm to filter-out the required DOM element to update, It shows amazing performance compare to other frameworks.

But some time, we may have a situation to integrate with other library written in pure javascript or any other frameworks. In official website has given you a sample code to add JQuery into the React Class component.

But in this article, Im gonna show you how to add JQuery UI accordion into react functional component.

Like I said early, React is not aware about the DOM element update happen outside the react framework. So in this assignment we need to return a empty element from the functional component which content update happen through JQuery UI. React component can listen to JQuery event and update react side accordingly.

Step 1

Create react app and import JQuery and JQuery UI using npm install command.

npx create-react-app <app_name>
npm install jquery
npm install jquery-ui

Step 2

Create new functional component and import JQuery, JQuery-UI accordion and CSS into it.

import $ from "jquery";
import "jquery-ui/ui/widgets/accordion";
import "jquery-ui/themes/base/all.css";

Step 3

This component returns just a single Div element with attached to ref.

import React, { useRef, useEffect } from "react";
import $ from "jquery";
import "jquery-ui/ui/widgets/accordion";
import "jquery-ui/themes/base/all.css";

const JQueryComponent = ({ onActivate }) => {
  const devRef = useRef();

  useEffect(() => {
   
  }, []);

  return (
    <div ref={devRef}>
      
    </div>
  );
};

export default JQueryComponent;

Step 4

Now we need to wrap this div element with JQuery framework and call accordion function to make this element looks like accordion. In order to do that you need to add some code around useEffect hooks. $(devRef.current) will wrap div element with JQuery. return function at the useEffect will be executed once component unmount from DOM, this is the place where you can clean up the thrid party code.

import React, { useRef, useEffect } from "react";
import $ from "jquery";
import "jquery-ui/ui/widgets/accordion";
import "jquery-ui/themes/base/all.css";

const JQueryComponent = ({ onActivate }) => {
  const devRef = useRef();

  useEffect(() => {
    $(devRef.current).accordion();

    return () => {
      $(devRef.current).accordion("destroy");
    };
  }, []);

  return (
    <div ref={devRef}>
      
    </div>
  );
};

export default JQueryComponent;

Finally…

You can add html content to the div, it could be written inline or base on data comping from parent component. Since this component should not re-render base on prop change , we can make Memo function. Also this component listen to onActivate even from jQuery UI accordion.

import React, { useRef, useEffect } from "react";
import $ from "jquery";
import "jquery-ui/ui/widgets/accordion";
import "jquery-ui/themes/base/all.css";

const JQueryComponent = ({ onActivate }) => {
  const devRef = useRef();

  useEffect(() => {
    $(devRef.current).accordion({
      activate: function (event, ui) {
        onActivate(ui.newHeader[0].outerText);
      },
    });

    return () => {
      $(devRef.current).accordion("destroy");
    };
  }, []);

  return (
    <div ref={devRef}>
      <h3>Section 1</h3>
      <div>
        <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
          Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
          condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
          Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu
          ante scelerisque vulputate.
        </p>
      </div>
      <h3>Section 2</h3>
      <div>
        <p>
          Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
          purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis
          porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non
          quam. In suscipit faucibus urna.
        </p>
      </div>
      <h3>Section 3</h3>
      <div>
        <p>
          Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque
          lobortis. Phasellus pellentesque purus in massa. Aenean in pede.
          Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed
          commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis
          leo purus venenatis dui.
        </p>
        <ul>
          <li>List item one</li>
          <li>List item two</li>
          <li>List item three</li>
        </ul>
      </div>
      <h3>Section 4</h3>
      <div>
        <p>
          Cras dictum. Pellentesque habitant morbi tristique senectus et netus
          et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
          faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
          mauris vel est.
        </p>
        <p>
          Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat
          lectus. Class aptent taciti sociosqu ad litora torquent per conubia
          nostra, per inceptos himenaeos.
        </p>
      </div>
    </div>
  );
};

export default React.memo(JQueryComponent);

Output looks like this.

You can download working sample code from here

https://github.com/kamprasad2007/How-to-use-JQuery-UI-in-React-App