I'll update the code to use react-draggable with the nodeRef prop, which is the recommended way to avoid the findDOMNode error in React 18+.
I've updated the code to continue using react-draggable while fixing the findDOMNode error. The key change is adding the nodeRef prop to each Draggable component, which is the recommended approach for React 18+.
useRef to create and manage refs for each draggable elementnodeRef prop to each Draggable component to avoid using findDOMNodenodeRef propfindDOMNodeThis approach maintains all the functionality of the original implementation while fixing the error related to the deprecated findDOMNode API.
Make sure you're using the latest version of react-draggable:
npm install react-draggable@latest
# or
yarn add react-draggable@latest
# or
pnpm add react-draggable@latestThis solution should work with React 18+ while still using the react-draggable library as requested.
I'll update the code to use react-grid-layout for resizing elements and add a side panel for editing element properties.
I've completely revamped the code to use react-grid-layout for resizing elements and added a property panel for editing widget properties. This implementation keeps react-draggable v2 for the left panel while using react-grid-layout for the main content area.
npm install react-draggable@2.2.6 react-grid-layout
# or
yarn add react-draggable@2.2.6 react-grid-layout
# or
pnpm add react-draggable@2.2.6 react-grid-layoutThis implementation provides a complete drag-and-drop interface with resizable widgets and a property editor panel, all while maintaining compatibility with react-draggable v2.