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
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.