Export React Components as Node Modules to NPM

Sep 12, 2020 • 5 Minute Read

Introduction

If you have been developing reusable components in React for your projects, an efficient approach for development is publishing them to npm as node packages. This is beneficial to you in two ways: First, you can use them in your future projects as dependencies without manually copying the code. And second, you can have other open-source developers look at the package, make suggestions, remove bugs, and develop it further for you.

In this guide, you'll learn how to create a simple React component using Create-React-App and export it as a node module to npm.

Setting up

Let's build a simple horizontal rule component in React. For purposes of brevity, it will be a simple React component rendering an hr tag. However, you can do something more with it, such as add props giving more customizability to developers in terms of its usage and styles.

Create an empty React project using Create-React-App.

      npx create-react-app react-hr-component

Install Babel to transpile ES6 JavaScript.

      npm install --save-dev @babel/cli @babel/preset-react

Next, create a folder named component inside the root directory. Your custom component goes inside this folder. This is important because at some point you list out the path to your component.

Creating the Component

Inside the component folder, create a file named HR.js that contains the code for your component. Render a simple hr tag inside it.

          import React from 'react';

export const HR=()=><hr/>

You can add styles directly to it as inline JSX styles or have a separate file for styling your JSX elements using classes. If you're using the latter method to style your component, make sure you import it correctly. You can also pass props for width, height, color, weight, etc. to this component and accordingly style the hr tag.

Making Configurational Changes to package.json

Your component is good to go and ready to be published on npm. The next step is making some configurational changes to the package.json file that allows you to export this component as a node module on npm. In your package.json file under under scripts, add the following line:

          "publish:npm": "rm -rf dist && mkdir dist &&  babel src/component -d dist --copy-files"
    

The above line allows you to compile your JavaScript using Babel. Make a directory called dist and copy the compiled JavaScript to this file using a single command.

The next change you need to make is to set private to false to let anyone use your component as a normal dependency or node module. Also, add Babel preset-react inside the presets configuration for Babel to add React specific supports to your component, such as support for JSX.

          {
  "name": "react-hr-component",
  "version": "0.1.0",
  "private": false,
  "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  }
  ...
}
    

The name appearing inside the package.json file is the actual name of the component that appears on npm. You can have a look at the entire package.json file here:

          {
  "name": "react-hr-component",
  "version": "0.1.0",
  "private": false,
  "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "publish:npm": "rm -rf dist && mkdir dist &&  babel src/component -d dist --copy-files"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.11.5",
    "@babel/preset-react": "^7.10.4"
  }
}
    

In case of any discrepancies, use the exact version of React being used in this example.

Publishing the Component to npm

You're just a few commands away from publishing your react component to npm. First, make sure you have an account on npmjs.

Inside your terminal, run:

      npm login

The command line will prompt you to enter your npm credentials. After you have successfully logged in, run the following command:

      npm run publish:npm

The above line of code acts as the alias of the script you created for transpiling ES6 code using Babel and creating a build for your component. Finally, run the following command:

      npm publish

You have successfully exported your React component as a node module to npm!

You can use it like any other React component available on npm.

Conclusion

Publishing your React components to npm allows you to develop faster and also helps other developers use your components as node modules in their projects. After publishing your component on npm, you should also provide documentation for its installation and use along with a GitHub repository for it.