I Created A Style Library
Tags: css, react, webdev, npm
Published: 2019-12-24 06:06:15

Some of you may remember my blog on [how to create your own react app template](https://dev.to/jimmymcbride/create-your-own-react-template-49p7). In the template I created for myself, I had a Global folder with a theme object with all my color variables and a list of styled components I frequently use. I also had an index.css I created to toss some style overhauls and threw in a normalize.css in there as well. I had really wanted to turn these things into a style library I could just pull from instead of having to remember the relative paths each time. Plus, it just seems like a really cool idea to have my own mini style-library out there! So I embarked on a new journey...

## Research Phase

I found 0 blogs on how to create a style library and publish it to npm. I felt so lost! I didn't even have a starting point. I began trying to come up with ways to start and I keep coming up blank. All I wanted was to make a style library similar to react-strap. Where you could just import all the components you needed from "react-strap" and maybe make my index.css file like maybe how you do the bootstrap.css import in your root index.js. I was currently using normalize.css and importing that in my root index.js. Bootstrap's css file already came with a normalize as part of the package...

#### ...then it hit me...

I immediately pulled open my browser and searched for react-strap, bootstrap and normalize.css on npm. Then I clicked all three links to view their GitHub's! If I couldn't find an article on how to do it, then I could just see how the people whom I wanted to emulate did it! ***Bazinga***

When I first started looking at all the code that was going on in these packages I was quite overwhelmed at first. There was a lot of stuff they were using that I just didn't know if it was necessary for me to use. After a while of sifting through everything the picture gradually became more clear. It was a all day affair trying to get the thing running nice and smooth, just the way I wanted and it still has such a long ways to go, but I did it! It really wasn't all that difficult in the end. 

## Install / Set Up

`npm i bushido-strap` or `yarn add bushido-strap` to install as a dependency. 

To get the global style overhaul (which includes a normalize.css) go into your root index.js file and `import "bushido-strap/css/styles.css`. 

If you use sass, you can even do `@import "bushido-strap/sass/styles/variables.scss";` at the top of a scss file to get all my color variables.

## The Styled Components

For more documentation on what my style library contains and what the pieces do, [check it out on my npm](https://www.npmjs.com/package/bushido-strap).

Importing components is just as easy as it is from react-strap. If you have a styled component, or two, or five, it's an easy import! Simply, `import { Wrapper, FlexBox, Button } from "bushido-strap"`. And that's it! You're off and ready to go with my new style library!

## Thanks for reading!

If you are interested in a step by step guide, leave a comment or DM me and I'll be sure to get one up for you. And don't forget to check out my [custom react app template](https://www.npmjs.com/package/cra-template-bushido) that already has this library integrated with it. Thank you guys so much, again. Happy holidays!