Jquery Ui is not working in react functional component

Issue

I want to achieve Resizable in React using Jquery UI.

I have code like this..

import $ from 'jquery';
import 'jquery-ui'; 

...
...

useEffect(() => {
    $(function () {
      $(".resizable").resizable();
    });
  }, [])

...
...

<div className="resizable" >Test</div>

I dont get the error but the resizable is not working ...

I want acheive like this jqueryui.com/resizable

Solution

Try this

First, install jquery-ui-bundle

npm install jquery-ui-bundle --save

Then,

import React, { useEffect, useRef } from 'react';
import $ from 'jquery';
import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.css';

...
...
const ref = useRef();

useEffect(() => {
    $(function () {
      $(ref.current).resizable();
    });
  }, [ref.current]);

...
...

<div className="resizable" ref={ref}>Test</div>

Upon doing some googling I found while using jquery-ui we can import individual widgets (could be quite cumbersome) or install jquery-ui-bundle instead and import it only once.

Answered By - TheWhiteFang