Create and publish your own React library

Author Damir Drempetić
Category Development
Date Sep 20, 2021
2 min read

In software development, we always tend to reuse some code and extract parts of it that we need in multiple places. Front-end development and React are not an exception. Therefore, we sometimes want to create React libraries as well.

When talking about React, library or package could be anything, e.g. one component, a whole set of them, they could be just UI parts but also include some logic that is repeated.

Chapter #1: Create your library with create-react-library

One very quick and simple way of creating a React library is by using create-react-library. We all know about create-react-app and let’s say create-react-library is the same thing for creating libraries.

To create a new library, simply run:

npx create-react-library <LIBRARY_NAME>

We will call ours bornfight-react-library, so the command would be:

npx create-react-library bornfight-react-library

Keep in mind to replace this library name with yours in any occurrence in this post.

You will then be asked for a few options as displayed on the image. It’s important to select:

  1. typescript as a template
  2. yarn as a package manager
  3. rest can be easily changed later in package.json if necessary
? Package Name bornfight-react-library
? Package Description Made with create-react-library
? Author's GitHub Handle
? GitHub Repo Path /bornfight-react-library
? Licence MIT
? Package Manager yarn
? Template typescript

That’s it, you’ve created your own React library.

Run and build your library

Executing in the project root directory:

yarn start
Develop, test and showcase your work
Option A) Using CRA

There is CRA in the examples directory. It is also started by executing:

cd examples
yarn start
Option B) Using Storybook

If you prefer using Storybook you can install it additionally to CRA:

cd examples
npx sb init

This means you will need to write your stories separately from the components.

Stories will be located in the examples dir, while you write your components in the project root. Otherwise, if you want to install Storybook in the project root, it breaks the CRA and therefore it is not suggested.

Chapter #2: Publishing a npm package created with create-react-library

Publishing a React library means publishing a node package. You can publish node packages either to a well-known public registry like npmjs.com or any other registry e.g. Github Packages.

Simple publishing scenario usually includes executing:

npm login
npm publish

More about publishing can be found in the rest of the chapter.

Publishing as a public package to npm.js registry
1) Ensure you provided a correct name and version in package.json

If you want to publish it under your npm organisation (here @bornfight), your changes should look like:

-  "name": "bornfight-react-library",
-  "version": "1.0.0",

+  "name": "@bornfight/bornfight-react-library",
+  "version": "0.0.1",

Otherwise, if you want to publish it under your account, just ignore this step and keep the package name without an organization prefix.

2) Login to your npm account
npm login

You will be prompted to enter your username, password and email.

3) Publish the package
npm publish
Publishing as a private package to Github Packages
1) Ensure you provided the correct name, version and repository, e.g.
"name": "@bornfight/bornfight-react-library",
"version": "0.0.1",
"repository": "https://github.com/bornfight/bornfight-react-library",
2) Update publish config to point to Github Packages registry
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  }
3) Login to your Github
npm login

You will be prompted to enter your username, password and email.
Use Github personal access token as the password.

4) Publish package
npm publish

Used resources and more information

_____
We’re available for partnerships and open for new projects.
If you have an idea you’d like to discuss, share it with our team!

Subscribe to our newsletter

Subscribe now and get our top news once a month.

100% development, design & strategy.

100% spam-free.

    You're now a part of our club!

    We got your e-mail address and you'll get our next newsletter!