Reusable React Component Library

This is a complete template for creating a reusable React component library, bundled with Vite (in Library mode), using TypeScript, and auto-generating type declarations (.d.ts files).

🚀 How to Set Up and Build

1. Install Dependencies

Run this in the project directory:

npm install

2. Build the Library

Compile your React components and output the build to the dist folder:

npm run build

This compiles your components into two main bundle formats in dist/:

• ES Modules (my-react-button.es.js): For modern bundlers like Vite, Webpack 5, etc.
• UMD (my-react-button.umd.js): For compatibility with CommonJS and legacy environments.
• Type Declarations (index.d.ts): Autogenerated typescript definitions.
• CSS (style.css): Shared component styles.

📦 How to Publish to npm

To publish this library to the npm registry so anyone (or your private team) can import it, follow these steps:

Step 1: Create an npm account

If you don't have one, sign up on npmjs.com.

Step 2: Log in via your terminal

Run the following command and follow the prompt:

npm login

Step 3: Choose a unique package name

Open package.json and change the "name" property to a unique package name.

• Tip: You can use scoped packages like @your-username/my-button to avoid naming conflicts on npm.

Step 4: Publish it!

Run:

npm publish

(If you are using a scoped package like @username/my-button, publish it with public access using: npm publish --access public)

🔌 How to Import & Use it in another project

Once published, install it in any other React project:

npm install my-react-component-library

Then, import and use it in your code:

import React from 'react';
import { Button } from 'my-react-component-library';
import 'my-react-component-library/dist/style.css'; // Import the component styles

export default function App() {
  return (
    <div>
      <Button 
        variant="primary" 
        size="large" 
        label="Click Me!" 
        onClick={() => alert("It works!")} 
      />
    </div>
  );
}

🛠️ Testing Locally Before Publishing

You don't have to publish to npm to test it! You can install it locally in another project:

1. In your library project directory, run:

   npm link

2. In your target app project directory, run:

   npm link my-react-component-library

Now, any changes you make and build will be instantly reflected in your test app.