Create and publish your own React library
Tags: engineeringmonday, react, reusability, javascript
Published: 2021-09-20 07:28:27

## Table Of Contents
* [Chapter #1 Create your library with create-react-library](#chapter-1)
* [Chapter #2 Publishing a npm package created with create-react-library](#chapter-2)


In software development in general, we always tend to reuse some code and extract parts of it that we need in multiple places. Front-end development nor React are not an exception. Therefore, sometimes we 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.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/3oKIPnAiaMCws8nOsE/giphy.gif">

## Chapter #1 <a name="chapter-1">Create your library with create-react-library</a>

One very quick and simple way of creating React library is by using [create-react-library](https://www.npmjs.com/package/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:
```js
npx create-react-library <LIBRARY_NAME>
```

We will call ours `bornfight-react-library` so the command would be: 
```js
npx create-react-library bornfight-react-library
```
Take attention to replace this library name with yours in any occurrence in this post.


You will be then 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 changed easily later in `package.json` if necessary.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/624td3rmwqwdsbj2ygkw.png)
 

That’s it, you’ve created your own React library.
<img width="100%" style="width:100%" src="https://media.giphy.com/media/ujUdrdpX7Ok5W/giphy.gif">
  

### Run and build your library

Executing in the project root directory:
```js
yarn start
```

###Develop, test and showcase your work

#### Option A) Using CRA

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

```js
cd example
yarn start
```

#### Option B) Using Storybook

If you prefer using Storybook you can install it additionally to CRA:
```js
cd example
npx sb init
```

>This means you will need to write your stories separately from components. 
>
>Stories will be located in the `example` 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 <a name="chapter-2">Publishing a npm package created with create-react-library</a>

Publishing React library means publishing node package. You can publish node packages either to a well-known public registry like [npmjs.com](https://www.npmjs.com/) or any other registry e.g. [Github Packages](https://github.com/features/packages).

Simple scenario publishing usually includes executing:
```js
npm login
npm publish
```

More about publishing can be found in the rest of the chapter.
### I) Publishing as a public package to npm.js registry

####1) Ensure you provided correct name and version in package.json 
If you want to publish it under your npm organisation (here @bornfight), your changes should look like:

```js
-  "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
```js
npm login
```
You will be then prompted to enter your username, password and email. 

####3) Publish package
```js
npm publish --access public
```

If you aren't publishing it under organization, `--access public` flag isn't necessary as it will be default option.

###II) Publishing as a private package to Github Packages

####1) Ensure you provided correct name, version and repository, e.g.
```js
"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
```js
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  }
```
####3) Login to your Github
```js
npm login
```

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

>Use [Github personal access token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token) as password.

####4) Publish package
```js
npm publish
```



## Used resources and more information 📚
* [soshace.com - How to Creact a React Component Library – Using a Modal Example](https://soshace.com/how-to-careate-a-react-ccomponent-library-using-a-modal-example/)
* [blog.bitsrc.io - 3 Ways to Build Your Own React Component Library](https://blog.bitsrc.io/3-ways-to-build-your-own-react-component-library-b4d00013a716)
* [betterprogramming.pub - Build a React Component Library and Publish to the GitHub Package Registry](https://betterprogramming.pub/build-your-very-own-react-component-library-and-publish-it-to-github-package-registry-192a688a51fd)
* [javascript.plainenglish.io - How to Publish Your React component on npm](https://javascript.plainenglish.io/how-to-publish-your-react-component-on-npm-9cf48d91944d)
* [betterprogramming.pub - How To Publish a React Component Library](https://betterprogramming.pub/how-to-publish-a-react-component-library-c89a07566770)
* [javascript.plainenglish.io - Publishing private npm packages using GitHub Packages](https://javascript.plainenglish.io/publishing-private-npm-packages-using-github-packages-415993cd2da8)
* [blog.anoff.io - Publishing private npm packages to GitHub Package registry for free](https://blog.anoff.io/2020-07-private-npm-package-github/)

## Your thoughts? 🤔
* Did you already create some React libraries or npm packages on your own?
* Which tools did you use?
* Did you ever tried [TSDX](https://tsdx.io/)?