Some of you may remember my blog on how to create your own react app template. 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.
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 that already has this library integrated with it. Thank you guys so much, again. Happy holidays!
Top comments (0)