How to build and publish your React component to npmjs.com

In the past days, we've been busy. We have published a couple of widgets to npmjs.com. If you havn't seen them, check them our on our open source page where we publish all our open source project, free for anyone to use.

Anyway, I got inspired to share how you can share your amazing work with the developer community as well. So in this guide, I will show how you can do it!

If you want to create a React app from scratch, this guide have you covered.

Build the application

All right, let's dive in. In this guide, we assume you already have you component or library up and running, so we will show how to build and publish it basically.

.babelrc

First, we need to install our babel presets in order to transpile our JavaScript code to support the targeted version.

npm install --save-dev @babel/core @babel/preset-react @babel/preset-env

If you haven't already have .babelrc set up, let's do it. Create .babelrc in the root if your project and configure it as follows.

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

package.json

Now we will do some stuff in package.json as well.

• Setup our build script
• Point to our main file
• Add keywords for promotion
• Point to our type file (optional)

Add this to your scripts:

"scripts": {
  "build": "babel src/ -d dist --copy-files"
}

Select your main file:

"main": "./dist/index.js",

Here we specify that the index.js will be the entry file. So make sure in your src/ directory, you have an index.js file that exports your component. Example below:

src/index.js

import Component1 from "./Component1";
import Component2 from "./Component2";

export { Component1, Component2 };

And now the consumer can access it like:

import { Component1, Component2 } from "my-package-name";

<Component1 />;
<Component2 />;

Now, add keywords to promote your lib:

  "keywords": [
    "react lib",
    "amazing stuff"
  ],

If you want your project to support TypeScript, select a types file to specfify your types:

 "types": "index.d.ts",

index.d.ts (optional)

I will share an example on how to specify the types for your React component, so that consumers that are using TypeScript can use it as well.

Below example shows the types for our react-stocks widget.

In your root of the project, create index.d.ts file.

declare module "react-stocks" {
  interface IReactStockProps {
    tickers: string[];
    doPoll?: boolean;
  }
  const ReactStocks: (props: IReactStockProps) => JSX.Element;
}

Build and publish

Now it is time to build our project.

npm run build

And now you should have a dist folder created in the root of your project. Let's do some npm stuff.

npm login
npm publish

And now if you are authenticated and the name of your library is free, it will publish it and everyone should be able to download it.

Patch a version

If you find a bug or want to do an update, you can patch like below:

npm version patch
npm publish

And it will increment the version for you.

NOTE: If you do a code change, you need to re-build the project with

npm run build

first in order to make the code changes take effect.

Outro

In todays guide we showed how to build and publish our React application/component or library to npmjs.com. I hope you found it helpful, and if any questions, don't hesitate to contact me.

Have a great day!