NPM Package - React component and toolkit library simply built for quick use and extensive customizability

The Process

With my earliest experiences working in React, I found component design to be the most interesting. This led me to the utilization of Material-UI, which I love. Using the library accelerated the process of building great looking components. However, when it came simple customization, which is important to me, the complexity and amount of code needed was detrimental to the process.

Every developer knows styling components can be very tedious, so I set out to make my own styled component library. I used Styled-Components as the foundation because of how lightweight and functional the library is. After making my first buttons and inputs, I felt a very high level of satisfaction. Next, I started the process of cleaning up code and creating a more professional base for my soon to be NPM package. This quickly became, and remains to be, one of my favorite and most prized endeavors to work on.

Take Aways

  • Expanded my knowledge about the inner workings of which NPM packages are made
  • Developed a comfort with working inside complex enterprise tailored code bases
  • Learned a lot about prop-types and error handling to ensure correct use opf the package
  • Learned Gatsby.js to make the documentation website

Technology stack

  • Styled-Components
  • React
  • JavaScript
  • NPM
  • Gatsby
  • SASS