How to Create an NPM Library from React Components?

Creating an NPM (Node Package Manager) library from your React components is a great way to make them reusable across different projects. This approach allows you to easily reuse and update components without needing to rewrite them for every new project.

Steps to Create an NPM Library from a React Component

Creating an NPM library for your React components allows you to share and reuse them across projects. Here’s a step-by-step guide to building and publishing your React component library to NPM.

Step 1: Create a New Project Directory

Create a new directory for your project and navigate into it.

mkdir gfg-test-package 
cd gfg-test-package

Step 2: Initialize npm

Run npm init to create a package.json file. This file will store important information about your package (like name, version, description, and dependencies).

npm init -y

Project Structure:

dist file will be generated after build command

Step 3: Install Babel and Dependencies

You need to install Babel to transpile your React components (from JSX and ES6 to ES5). Additionally, you’ll need React and ReactDOM as dependencies. Install these with:

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

Step 4: Update the package.json configuration

Now, you need to update the package.json to add your build script and other dependencies. Replace the contents with the following configuration:

{
	"name": "gfg-demo-button",
	"version": "1.0.0",
	"description": "Demo package",
	"main": "dist/index.js",
	"scripts": {
		"build": "babel src --out-dir dist"
	},
	"author": "Your Name",
	"license": "ISC",
	"dependencies": {
		"@babel/cli": "^7.24.8",
		"@babel/core": "^7.24.8",
		"@babel/preset-env": "^7.24.8",
		"@babel/preset-react": "^7.24.7",
		"react": "^18.3.1",
		"react-dom": "^18.3.1"
	}
}

Step 5 : Configure Babel

Create a .babelrc file in the root of your project. This file tells Babel which presets to use for transpiling your React code.

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

Step 6: Configure .npmignore

To ensure that unnecessary files are not published to NPM, add the following entries to a .npmignore file:

# Exclude source files
/src

# Exclude local configuration
/.babelrc
/webpack.config.js

# Exclude node_modules
/node_modules

# Exclude test files and directories
/tests
/__tests__
/test
/spec
/*.test.js
/*.spec.js

# Exclude miscellaneous files
/.DS_Store
/npm-debug.log*
/yarn-debug.log*
/yarn-error.log*

Step 7: Create the React Component

Now, create your React component inside the src folder.

// Filename - src/index.js

import React, { useState } from 'react';

const Button = () => {
const [color, setColor] = useState('blue');

const changeColor = () => {
	setColor(color === 'blue' ? 'red' : 'blue');
};

return (
	<button style={{ backgroundColor: color }} onClick={changeColor}>
	Click me
	</button>
);
};

export default Button;

Step 8: Build the package

Before publishing, you need to build the package. This will transpile your components from the src folder to the dist folder.

npm run build

Step 9: Publish Your Package

To publish your package, you’ll need to log in to your NPM account. If you don’t have an account yet, sign up at npmjs.com.

npm login

Use npm publish to publish your package to the npm registry.

npm publish --access public

Using the npm library in your react app:

Step 1: Create React app:

npx create-react-app my-app
cd my-app

Step 2: Install Your Library

Install your npm library in your React app.

npm install gfg-demo-button

Updated dependencies in the package.json file:

"dependencies": {
    "@monaco-editor/react": "^4.6.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "gfg-demo-button": "^1.0.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "react-select": "^5.8.0",
    "web-vitals": "^2.1.4"
},

Step 3: Import and Use the component

// my-app/src/App.js

import React from 'react';
import Button from 'gfg-demo-button';

function App() {
return (
	<div className="App">
	{/* <Header></Header> */}

	  <Button/>
	</div>
);
}

export default App;

Step to Run the App:

npm start

Output

Why Create an NPM Library?

Creating a reusable library of React components offers several benefits:

• Save time: Reuse components across different projects.
• Simplify development: Share your components with other developers.
• Maintain consistency: Ensure that your UI components are consistent throughout your projects.

Conclusion

Creating an NPM library from your React components is a great way to share reusable components across different projects. By following the steps outlined in this guide, you can bundle your components with Rollup, set up the necessary NPM configuration, and publish your library for others to use. This allows you to streamline development and make your React components modular and easy to distribute.