✨ Inspiration ✨

The aim of REPopup is to provide all-in-one UI components related to modal and popup windows for creating apps in react. There are many great UI components made by developers all around open source. REPopup makes using modals and popups very easy by giving you a ready-made as well as an easily customizable kit with consistent API and look and feel.

⚒ What it does ⚒

This project is an Open Source React Component Library with the name REPopup. It provides all-in-one UI components related to modal and popup windows for creating apps in react.

👷‍♂️ How I built it 👷‍♂️

I have used the Typescript language to build my react components while styled-components package to style mine react components. I have also used other famous tools related to React Ecosystem such as JEST, Storybook, Rollup, etc.

📋 Features 📋

  • React modal components for easy and fast web development.
  • Flexible modal positioning.
  • Styled components and easy to customize.
  • Works in major browsers without polyfills.
  • Ready-made and well-designed InputDialog component.
  • Alert component with five different variants.
  • Supports TypeScript.
  • And much more!

💪 Challenges I ran into 💪

The most challenging part of this project came when I started building my documentation site.

So for this, I had to first learn how to write markdown and also about MDX and then implement it so that I can build a beautiful static documentation site for my project.

Then as usual I went on dev.to as well as medium.com and read some articles about building documentation sites. And then I heard about a wonderful tool called docusaurus which is an open-source project by Facebook used to build documentation sites. I learned to write MDX which allows writing markdown as well as JSX or TSX at the same time and I completed my beautiful documentation website.

🚸 What I learned 🚸

During the span of this project, I get to learn so many new things such as Rollup with some plugins to transpile and bundle our library, Storybook which allows us, to create and test components in isolation and also show our components to non-technical members of the team, JEST for unit testing as well as integrated testing of our components.

😲 What's next for REpopup 😲

In the future, we plan to

  • Write its API for all the famous frontend frameworks such as Vue JS, Angular JS as well as for vanilla javascript.

Built With

Share this project: