React Component Library
Table Of Contents
About
This is a React component library that I created. It uses the Styled Components package to style the components so they can be easily imported everywhere.
I made this because I believe in the DRY coding principal. Meaning I don't want to have to re-make a button component every time I want to make a new website or project.
Development
Full List Of Technology Used
- React
- TypeScript
- Styled Components
- Used to style each component.
- Roll Up
- Used to create the distribution version.
- Story Book
- Used to view and work on the components.
- Jest
- Used to test each component.
- NPM
- Used to host the package.
Design
Each component is designed to be easy to use, responsive, and customizable. Styling can be done through either setting colors directly on the elements or by setting CSS variables. Using CSS vars makes it very easy to theme the components.
Notes
There is one very special component that I wrote for the library. I made a custom Image component that can do a lot of things. I needed it because Next.Js does not support using their built in Image component and other methods were a bit of a headache to use. It can do things like create a source set to use webP images or different sized images such as thumb-nails.
Links
Screenshots
