Mozilla Multiple Page Cross browser PDF Viewer

Amith Moorkoth — Wed, 26 Apr 2023 17:34:59 +0000

PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5.

We have tried to bind multiple pages for the pdf renderer to show for a demo purpose, it is just a few lines of code which extends the above library.

Please let me know this is interesting, will try to enhance the viewer.

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

Amith Moorkoth — Wed, 15 Mar 2023 14:41:18 +0000

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

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

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

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

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

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)

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.

...continue