The easiest way to publish your React component to NPM with Typescript

In this blog, I would like to share how I publish my own react components to Node Package Manager or NPM. There are many ways to achieve the same goal. I tried many of them. But I think this is the easiest and quickest one I ever found.

Benefits of publishing your own react components to NPM.

First of all, for those who wonder why we should consider publishing the components, I would point out one major benefit of doing that.

It improves modularization and re-usability: You may have heard that it is always recommended to keep the components as small as possible. By keeping it small, the components become more manageable and reusable. By publishing the minimized components, you can reuse the component not only in the same project, but also in different projects without ctrl+c and ctrl+v. Properly published components will save you a lot of time that could have been spent in coding the same components over and over.

why you consider publishing components

Use my git template repository

Github provides an option to turn a repository into a template that can be used as a starting point of another project.

I have created a template git repository at “https://github.com/tofusoup429/react-component-module-frame”. The repository has all the setups for publishing react-components in tsconfig.json and package.json.

By using the template, you will not be bothered with repetitive configurations every time you create and publish new components.

template git repository

Clicking the green button will lead you to a page where you can makes a new repository on top of the template.

I will create a new repository called “components-in-loading”. I am planning to make a group of components moving or flashing components that appear in loading time.

new repository

It creates a separate repository that has the same file structure as the template. Now we need to clone the new repository into local and modify the files to create new components.

git clone https://github.com/tofusoup429/components-in-loading.git

This command takes the repository to your local.

Install Dependencies

yarn install

This installs dependencies listed on package.json such as react, react-dom, and styled-components.

Make changes

You should modify the following files.

1. package.json

package.json

Change the name, description, version and description. The name should be unique to publish.

2. src/rotatingText.tsx

The files inside src/ is the components you are creating. I have made a simple rotating text component with styled-components as an example. I named it “RotatingText”.

rotatingText.tsx

1) src/index.ts

Now, export the component from index.ts, the root.

index.ts

Build

yarn build

As set in package.json and tsconfig.json, the “yarn build” command transpiles files under /src and package.json in es5, and ships them under /dist.

package.json

tsconfig.json

After the build command, you should see /dist created at the project root with files furnished. This is the files that will be packaged and published.

Do you see the files ending with .d.ts? This is declaration files which will show type hints even when the component is imported in JSX files.

dist

Publish

yarn publish

We are almost done. This is the last step. As set in package.json, “yarn publish” only publish “files inside dist” and “package.json”.

I could have used “.npmignore” to exclude specific files and directories when publishing, but I prefer this way better. By setting “files” in package.json, you can specify which files or directories will be published.

package.json

Sometimes, I get an error due to not unique package name. The name, “components-in-loading”, seems to be in use by someone else.

error in publishing

The easiest resolution to this error is to give a scoped name such as @tofusoup429/components-in-loading. I have to change the package name to @tofusoup429/components-in-loading.

package.json

By setting “main”:“dist/index.js”, we can use “import {RotatingText} from “@tofusoup429/components-in-loading”, not “import {RotatingText} from “@tofusoup429/components-in-loading/dist”

Now it works.

it works.

Now it is on “https://www.npmjs.com/package/@tofusoup429/components-in-loading”.

Test

Component Published Tested

OK. It works.

Summary

1. Publishing a small and frequently used components will save you a lot of time.
2. Use my template git repository where I have set up basics for publishing components.
3. Modify files under “src/” in the template to make your own components.
4. “yarn build” will transpile the src/files to es5 and ship the files into /dist.
5. “yarn publish” will publish the files under /dist to NPM.
6. Now you can add the component in your projects by “yarn add <published component name>

Thank you for reading my blog. I hope this help you save some time.