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.

View On NPM

View Story Book Of Components

Screenshots

No alt provided.
No alt provided.
No alt provided.
No alt provided.
No alt provided.
No alt provided.