DEV Community

Cover image for Drag and drop toolkit for React Material UI {custom made}, JSON based react forms Generator.
Amith Moorkoth
Amith Moorkoth

Posted on

Drag and drop toolkit for React Material UI {custom made}, JSON based react forms Generator.


We are going to discuss about a interesting toolkit that is available for react drag and drop utility.

๐Ÿšจ Note: This project is just for demo purpose, cannot be used for production

Any kind of feedback is welcome, thanks and I hope you enjoy the article.๐Ÿค—

๐Ÿ‘‰ Packages used.
โ–ถ๏ธ React JS (v.18)
โ–ถ๏ธ React DND
โ–ถ๏ธ Material UI

๐Ÿ‘‰ Clone the Project.

๐Ÿ‘‰ Open Visual Studio Code
npm install

๐Ÿ‘‰ For starting the project
npm start

๐Ÿ‘‰ Once the project start running please go to the URL http://localhost:8080/generate-component to test the project

Now from here the article is going to be the complete workflow of the react DND bundle, which we have just created now.

Assuming that the reader already have prerequisite knowledge about the react, material UI and react DND.

๐Ÿ‘‰ Begins (src\Controller\ComponentGenerator\index.js)

This is the Controller component where the actual process begins, here we are setting up the context provider for the entire application.

Image description="context provider explanation"

๐Ÿ‘‰ Bombie Invokes our actual component for processing (src\Lib\ComponentGenerator\index.js)

This component is responsible for drawing the entire screen, which consist of two frames

  • Drawer

  • DND Provider

Image description="drawing layout consist of drawer and dnd provider"

๐Ÿ‘‰ **Drawer

This is responsible for the showing the JSON data that got generated through the process of drag and drop

๐Ÿ‘‰ **DND Provider

This component responsibility includes

  • Showing the Element/custom Element that are available for dragging and can be dragged to the drawer for designing a component (src\Lib\ComponentGenerator\DragBox\index.js)

Image description="all draggable element"

  • Draggable Container (src\Lib\ComponentGenerator\Container\element-recursion.js)

Image description="draggable container"

This is a recursive container which will recursively loop and attach the respective DOM, as per the current requirement.

๐ŸŸ  Why we require JSON based React Material Toolkit? (why the project got started?)

  • Our Industry from the beginning is very thirsty about the drag and drop design with functionality includes over it. eg: WordPress, shopify etc...

  • We can store react component as JSON in **mongo db and access anywhere by using a single library in react as well as in JavaScript**, this will reduce the big overhead for performance and page loading since we will get the most optimized data which will travel between server and client.

  • Designers can have the control over the 70% development lifecycle.


Top comments (1)

artu_hnrq profile image
Arthur Henrique • Edited

Nice coding