featured image for

React plugin details

React plugin development

React is a very popular web development framework from Facebook.

It is used for highly responsive web applications that use JSX code for efficiency and fewer DOM updates.

In developing a plugin or REACT I faced some challenges in the beginning when my learning was not adequate.

But over time I could fall in love and finish this work.

Plugin architecture

In react the file ProgressUp.tsx is the source for all the template and the typescript code that does the file upload.

Each image is included as part of assets packaging.

How it works?

The plugin works in the standard react methodology of combining JSX syntax with typescript to get things done.

I used the function component approach for this plugin.

How do you use it?

This is how you install and use. The stackblitz link has the instructions and help needed.

In short, just installing using npm or yarn like this will get you started.

	$ yarn install progress-up-react


	$ npm install progress-up-react

Then just put this inside the HTML source the tags needed and you are done.



The rendering issues I had with the file preview was pretty challenging which was finally solved by changing the algorithm.

Back to blog