Build a React Component Library and Publish to the GitHub Package Registry

It’s always handy when working across multiple projects

Photo by Artem Sapegin on Unsplash

Do you have that one set components that are nicely designed, so perfect, that you copy them from one project to another? Do you dream about using npm install to put it in your next app, instead of having to copy/paste it? If so, you’re in the right place!

Today, you’ll learn how to build your own React Component Library and publish it to the brand new GitHub Package Registry!

You will be using these following cool things:

• TypeScript: No need to introduce this, I hope!
• Rollup.js: A Javascript module bundler to compile our code,
• Create-react-app: The easy-way to create a simple React App which we are going to use as a playground to test your component(s),
• Npm-run-all: A CLI tool to run multiple npm-scripts in parallel,
• GitHub Package Registry: GitHub’s package management service, which makes it easy to publish public or private packages next to your source code.

As usual with my pieces, all the code can be found on my GitHub.

Photo by Claudio Testa on Unsplash

Time Is Money, Let’s Get Started!

The package.json

In a directory of your choice, create a new package.json file and install the first devDependencies we will need.

$ npm init -y
$ npm i -D @types/react @types/react-dom @types/styled-components typescript

The tsconfig.json

As I said, we’re going to use TypeScript, therefore, our project needs a TypeScript Config.

To generate one, make sure you have TypeScript globally installed in your environment by running $ npm i -g typescript Then, just run$ tsc --init.

This command generates a json file in which we’re going to modify a bunch of things:

• Uncomment the jsx key and change its value to react