How to Create an NPM Library from React Components ?

Creating an NPM library from React components involves configuring Babel and Webpack, bundling your components, and publishing them to NPM. This process enables easy reuse and sharing of React components. In this tutorial, we'll create a library containing a button component that changes color when clicked. Then we'll demonstrate how to consume this library in a separate React application.

Approach

To publish a React component on npm, configure Babel with @babel/preset-react and @babel/preset-env. Ensure package.json points to the transpiled dist folder. Build the component, then publish using npm publish.

Steps to Create NPM Library from React Component

Step 1: Setup Your Package Folder

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

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

Step 2: Initialize Node app

 npm init 

Press ^C at any time to quit.
package name: (gfg-test-package) 
version: (1.0.0) 
description: test package
entry point: (index.js)
test command: 
git repository: 
keywords: test #keywords related to your package or components
author: Your Name
license: (ISC)

Project Structure:

dist file will be generated after build command

Step 3: Update the package configuration

Update the package.json file and scripts as given below

{
	"name": "gfg-demo-button",
	"version": "1.0.0",
	"description": "demo package",
	"main": "dist/index.js",
	"scripts": {
		"build": "babel src --out-dir dist"
	},
	"author": "",
	"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 3: Install the dependencies listed above:

npm i @babel/cli	@babel/core @babel/preset-env @babel/preset-react

Step 4: configure .babelrc file

Add Babel configuration in .babelrc file.

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

Step 5: Configure .npmignore

Add below text to .npmignore

# 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 6: Create the React Component

// 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 7: Build the package

npm run build

Step 8: Publish Your Package:

Log in to npm using npm login, sign up if you don't have account.

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: This output will be visible on localhost:3000 on the browser window