the packages we needs to install to create the npm react js library.

npm install react react-dom npm install --save-dev babel-cli babel-preset-env babel-preset-react css-loader style-loader webpack webpack-cli webpack-node-externals

2. Set Up Babel Configuration

• Create a .babelrc file in your package root to configure Babel for transpiling your code:

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

3. Set Up Webpack Configuration

• Create a webpack.config.js file in the root of your package. This file will define how to bundle the library and handle CSS modules:

const path = require("path");
const nodeExternals = require("webpack-node-externals");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
    libraryTarget: "umd",
    globalObject: "this",
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.module\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
};

4. Add Scripts to package.json

• Update your package.json with build and pre-publish scripts:

"main": "dist/index.js",
"scripts": {
  "build": "webpack",
  "prepublishOnly": "npm run build"
}

5. CSS Module Configuration

• In your components, import CSS modules using the .module.css extension. For example, if you have a CSS module Button.module.css in the src/components folder:

6. Build the Package

npm run build

7. Publish to npm

• Before publishing, ensure the following:
• Your package.json has a unique "name" property (e.g., "@yourusername/your-component-library").
• You are logged into npm using npm login

publish npm packages commond

npm publish --access public