Developing & publishing React component library to NPM (styled-components + Typescript)

Let’s say you want to create an NPM package with React components styled in styled-components and you also want to use Typescript.

Let’s assume your library is going to be named test-react-component-lib.

I prepared a boilerplate repository that will allow you to easily develop and deploy your components library to NPM. It’s based on Typescript version of rollup-starter-lib + I added and configured an example nextjs app that will let you test your library and publish a demo to GitHub pages.

Boilerplate: https://github.com/michal-wrzosek/react-component-lib

Boilerplate repo setup

Clone the boilerplate repo and navigate to root folder:

git clone https://github.com/michal-wrzosek/react-component-lib test-react-component-lib
cd test-react-component-lib

Set your new git remote:

git remote remove origin
git remote add origin <your-new-git-repository>
git push -u origin master

Install all dependencies (our library + peer dependencies + example-app):

npm i

Run Rollup bundler and example-app in watch mode:

npm run dev

Library development

Now you can start working on your library. The boilerplate repo is ready to start working with React, styled-components and Typescript.

Keep all your library files within /src directory. The root file with all exports is located in /src/index.ts

Example-app is located in /example-nextjs directory and it’s a v14 nextjs app.

While running npm run dev every time you change something in your library, Rollup is creating 3 JavaScript bundle files and 2 root Typescript declarations of all your types:

• /dist/index.cjs.js (CommonJS for NPM)
• /dist/index.esm.js (ESmodule for NPM)
• /dist/index.d.ts (Typescript for NPM)
• /dist/… (other Typescript files for NPM)

+

• /example-nextjs/src/reactComponentLib/index.js (Bundle for example app)
• /example-nextjs/src/reactComponentLib/index.d.ts (Typescript for example app)
• /example-nextjs/src/reactComponentLib/… (other Typescript files for example app)

Peer dependencies

Currently react, react-dom and styled-components are set as peer dependencies so they are not included in the bundle. They should be provided by the parent library that will use our library. That way we’re keeping our library as small as possible.

Prepare for publishing

Update package.json fields with your own data:

{
  ...
  "version": "1.0.0",
  "name": "test-react-component-lib",
  "author": {
    "name": "Your Name",
    "email" : "your@email.com",
    "url": "https://your.website.com",
  },
  "homepage": "<package-homepage>",
  "repository": {
    "url": "<reposityr-url>",
    "type: "git"
  },
  ...
}

Remember to keep your versions correct and follow semver.

Given a version number MAJOR.MINOR.PATCH, increment the:

1. MAJOR version when you make incompatible API changes,
2. MINOR version when you add functionality in a backward-compatible manner, and
3. PATCH version when you make backward-compatible bug fixes.

You might also want to update the README.md file before releasing your package.

Demo app hosted on GitHub Pages

It’s often convenient to publish our example app to GitHub Pages so that we can show off our components. To do so, update homepage field in the example app’s package.json ( /example-nextjs/package.json ).

{
  ...
  "homepage": "https://<your-username>.github.io/test-react-component-lib",
  ...
}

And then from root of our repo you can run this command whenever you want to deploy your example app:

npm run deploy-example

Now you can access your example app online via the link you specified in homepage field. You can add this link to your README.md file so that your users will be able to check how your components look like.

Publishing a package to NPM

When your library is ready to be published log in to NPM (you need an account: https://www.npmjs.com/) and publish your code:

npm login
npm publish

That’s all! Your package is now public :)