Feature A

Install the package in a React or React Native project:

npm install sandeepulusanisirva-feature-a

Use the component and pass a title:

import FeatureA from "sandeepulusanisirva-feature-a";

export default function App() {
  return <FeatureA title="Welcome to Feature A" />;
}

The package uses a react-native-web export for React browser apps and a React Native export for native apps.

Plain MVC Usage

Plain MVC apps cannot import npm packages directly from a Razor or HTML view. The browser does not know how to resolve package names like sandeepulusanisirva-feature-a from node_modules.

This will not work directly in a Razor or HTML view:

<script>
  import FeatureA from "sandeepulusanisirva-feature-a";
</script>

Instead, add a small frontend build step that bundles the React component into a browser-ready JavaScript file.

Install the frontend dependencies in the MVC project:

npm install react react-dom sandeepulusanisirva-feature-a
npm install -D vite typescript @vitejs/plugin-react

Create a React entry file:

// src/feature-a-entry.tsx
import React from "react";
import { createRoot } from "react-dom/client";
import FeatureA from "sandeepulusanisirva-feature-a";

const root = document.getElementById("feature-a-root");

if (root) {
  createRoot(root).render(<FeatureA title="Hello from MVC" />);
}

Build the frontend bundle:

npx vite build

Mount the bundled React component from the MVC view:

<div id="feature-a-root"></div>
<script type="module" src="/dist/assets/feature-a-entry.js"></script>

The MVC app does not need to become a full React single-page app. It only needs a small frontend bundle mounted into the view where the component should appear.

Publishing

Before publishing a new version, update the version in package.json, then run:

npm run build
npm pack --dry-run
npm publish --access public