DEV Community

Cover image for I made a react component generator app using react
Arian Nargesi
Arian Nargesi

Posted on

I made a react component generator app using react

In this post I'm going to show you guys an open source project that I made using React to help react developers and myself :)

Motivation

Every time I wanted to work on a personal project without any design file, the process of finding the best UI tone was a real struggle. Plus since I work on a laptop without any extra monitors I didn't have good feelings when I had to constantly switch between the editor and the browser to see the results. This was my motivation to create this project.

What is quick component?

This website speeds up your component creation process and allows you to spend less time writing code for the UI of your react component so you can move quickly to work on the logic of your component

How to use it?

for now, I only support basic HTML elements like buttons, div, and some more HTML elements. You can apply styles to these items and see the effect instantly to find what is right for you and when you are happy with your component you can download codes with custom configurations in a zip file or you can copy the code from the browser

This project definitely has some flaws. I'll try to fix them in the future. but what I currently have is good enough for me.

Note: This website is not optimized for mobiles
Quickcomponent.io
Github

Available features:

  • Support for typescript and JavaScript
  • Support to CSS and SASS
  • Support adding custom props
  • Support for adding a empty text file in the downloaded file
  • Support for importing 5 hooks into your script
  • And more ...

I can definitely add more feature to it Like:

  • Support for adding image
  • Support for explore and trying different fonts
  • Support for selecting from a list of predefined components
  • Support for custom CSS roles
  • Support for React Native and pure HTML/CSS

What do you think?
What feature do you like to have?

I'm waiting for your amazing feedbacks

Discussion (2)

Collapse
benjezza profile image
ben jesaulenko

This is great! Cant wait to see where it ends up.