Planning
After learning about the reusability and adaptability of React components, I wanted to build my own library with a common theme. The purpose of this project was to create something that I may be able to use in future projects and to get more familiar with building components in React.
Before anything I built the design file in Figma and went with a matcha theme since it has an earthy look and taste that I am fond of. You can view the design files here.
Development
This part was pretty straightforward. The main idea was to create each component and make it so that the use can insert children into each one as props so the content can be adjusted to fit the user's needs.
One aspect I did have to consider was how to style each component and what aspects I wanted to be customizable by the end user. For example, I made it easy for the user to choose what kind of button they need by adding a specific class name but if they want to change the background color to something completely different outside of the matcha theme, they would have to go into the css file and edit it manually,
Results
This project helped me understand the power of React when it comes to creating large applications that require reusable components and how the developer would have to create each one with the intention of it being used in multiple different pages.
This approach ensures that the end user has a consistent experience using the components. Another benefit of reusing components is writing less code and saving time to complete the project they are being applied to.
At the moment this project is still a WIP and I am currently working on the dark theme toggle for all the components.