# Build Simple, Efficient, and Reusable Components for React NPM Packages

### **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***](https://github.com/kawaljain/react-rollup-package-template)

In this [***repository***](https://github.com/kawaljain/react-rollup-package-template), 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](https://rollupjs.org/) 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**](http://twitter.com/rollup/plugin-node-resolve "Twitter profile for @rollup/plugin-node-resolve")**:** Resolves third-party modules in node\_modules
2.  [**@rollup/plugin-commonjs**](http://twitter.com/rollup/plugin-commonjs "Twitter profile for @rollup/plugin-commonjs")**:** Converts CommonJS modules to ES6 for Rollup to process.
3.  [**@rollup/plugin-babel**](http://twitter.com/rollup/plugin-babel "Twitter profile for @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***](https://kawaljain.medium.com/)

> *Follow me On* [***Dev***](https://dev.to/kawaljain)

> *Checkout more* [***Portfolio***](http://kawaljain.com/)

### In Plain English 🚀

*Thank you for being a part of the* [***In Plain English***](https://plainenglish.io/) *community! Before you go:*

*   Be sure to **clap** and **follow** the writer ️👏**️️**
*   Follow us: [**X**](https://x.com/inPlainEngHQ) | [**LinkedIn**](https://www.linkedin.com/company/inplainenglish/) | [**YouTube**](https://www.youtube.com/channel/UCtipWUghju290NWcn8jhyAw) | [**Discord**](https://discord.gg/in-plain-english-709094664682340443) | [**Newsletter**](https://newsletter.plainenglish.io/) | [**Podcast**](https://open.spotify.com/show/7qxylRWKhvZwMz2WuEoua0)
*   [**Create a free AI-powered blog on Differ.**](https://differ.blog/)
*   More content at [**PlainEnglish.io**](https://plainenglish.io/)