NPM React Package with Rollup

Objectives

I’ve always been a big fan for building code that is reusable, modular, and simple on its own but capable of achieving great things when combined with other components. The goal of this blog is to share how you can create reusable code modules and publish them online so that developers around the world can access and use them in their own projects.

Github

If you like to skip the end, here is the link: Repo

In this repository, you’ll see how I’ve structured the code to keep it modular and focused on a single responsibility.

Feel free to check it out, experiment with it, and see how you might adapt or expand it for your own needs!

Prerequisites

Before starting, ensure you have:

• Node.js and NPM installed.
• A basic understanding of React and package management.
• Git configured (for publishing to NPM).
• Rollup

Rollup

Rollup is a powerful JavaScript bundler optimised for creating libraries. Its tree-shaking capabilities make it ideal for building NPM packages, especially React components. In this guide, we’ll walk through creating and publishing a React package using Rollup.

Steps

Step 1: Setup the Project

1. Create a directory for your package:

mkdir react-rollup-package-template
cd react-rollup-package-template

Note: Make sure your npm package name is unique and there is no module with exactly the same as yours.

2. Initialise the package:

npm init -y

This generates a package.json file.

Step 2: Install Dependencies

1. Install React and ReactDOM as peer dependencies:

npm install react react-dom --save-peer

2. Install Rollup and plugins:

npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel rollup-plugin-peer-deps-external rollup-plugin-terser --save-dev

1. @rollup/plugin-node-resolve: Resolves third-party modules in node_modules
2. @rollup/plugin-commonjs: Converts CommonJS modules to ES6 for Rollup to process.
3. @rollup/plugin-babel: Transpiles modern JavaScript.
4. rollup-plugin-peer-deps-external: Automatically excludes peer dependencies like react.
5. rollup-plugin-terser: Minifies the output.

Step 3: Write Your React Component

Create a directory src/ and add your component file.

// Dummy.tsx
import React from "react";
import "./style.css";

import { DummyComponentProps } from "./Dummy.types";

const DummyComponent: React.FC<DummyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <h1 className="font-size-20">I am {name}</h1>
      <h2 className="font-size-14">I am {age} years Old</h2>
    </div>
  );
};

export default DummyComponent;

Step 4: Configure Rollup

// rollup.config.js
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import { terser } from "rollup-plugin-terser";
import external from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";

const packageJson = require("./package.json");

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
        name: "test-package-cr-typ",
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      external(),
      resolve(),
      commonjs(),
      typescript({
        tsconfig: "./tsconfig.json",
        tslib: { optional: false },
      }),
      postcss(),
      terser(),
    ],
  },
  {
    input: "dist/esm/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    external: [/\.css$/],
    plugins: [dts.default()],
  },
];

Step 5: Update package.json

1. Addd main and module fields to indicate the package entry points

{
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js"
}

2. Add a build script

{
  "scripts": {
    "build": "rollup -c --bundleConfigAsCjs"
  }
}

// package.json
{
  "name": "react-rollup-package-template",
  "version": "0.1.0",
  "type": "module",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/index.d.ts",
  "tslib": {
    "optional": true
  },
  "scripts": {
    "build": "rollup -c --bundleConfigAsCjs"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^28.0.1",
    "@rollup/plugin-node-resolve": "^15.3.0",
    "@rollup/plugin-typescript": "^8.5.0",
    "@types/react": "^18.3.12",
    "react": "^18.3.1",
    "rimraf": "^3.0.2",
    "rollup": "^4.27.2",
    "rollup-plugin-dts": "^6.1.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2",
    "typescript": "^5.6.3"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/kawaljain/react-rollup-package-template.git"
  },
  "keywords": [
    "react",
    "reactjs",
    "react package",
    "create react package",
    "typescript react package",
    "create npm package",
    "create react npm package",
    "typescript create package",
    "package create",
    "example package npm create",
    "build npm package",
    "custom package react npm",
    "custom react typescript package"
  ],
  "author": "Kawal Jain",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/kawaljain/react-rollup-package-template/issues"
  },
  "homepage": "https://github.com/kawaljain/react-rollup-package-template#readme"
}

Step 6: Build the Package

Run the build command:

npm run build

This creates a dist/ folder containing the compiled files.

Step 7: Test the Package Locally

1. Link the package:

npm run link

2. In a separate React project, link and test the package:

npm install react-rollup-package-template

Step 8: Publish to NPM

1. Ensure you are logged into NPM

npm login

2. Publish the package

npm publish

Use the access public flag if it's your first public package:

npm publish --access public

Conclusion

Congratulations! You’ve created and published your first React package using Rollup. Share your package with the world, and remember to maintain it by updating dependencies and fixing issues.

Tips

• Add a README.MD with usage instructions.
• Include a TypeScript declaration file (.d.ts) for TypeScript compatibility.
• Keep peer dependencies updated for compatibility with the latest React versions

That’s all from me, feel free to read and comment, If you find any issues, you can directly open an issue on GitHub. If you interest in flutter, you can read my article here in my medium. See you!

Github

You can find the demo repository, which showcases some core principles of creating modular code. The goal is to demonstrate the building blocks that you can later expand into more complex, reusable components. While it’s not a complete library yet, this example can serve as a starting point for building larger, reusable components that can be shared across multiple projects.

Feel free to check it out, experiment with it, and see how you might adapt or expand it for your own needs!

Thanks for reading

Happy coding!

If you enjoyed the article and would like to show your support, be sure to:

Follow me On Medium

Follow me On Dev

Checkout more Portfolio

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter | Podcast
• Create a free AI-powered blog on Differ.
• More content at PlainEnglish.io