React Export Component```jsx

import React from 'react'; import { ExportButton } jsx import React from 'react';jsx import React, { useState } from 'react'; import { ExportButton, ExportOverlay } from 'react-export-components-omair';port { ExportOverlay } from 'react-export-components-omair';m 'react-export-components-omair'; A React component library for handling export operations with progress tracking and overlay UI.

Installation

npm install react-export-components-omair

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom @mui/material @stomp/stompjs react-icons

Components

ExportButton

A button component that handles export operations with STOMP real-time progress tracking.

import React from "react";
import { ExportButton } from "@yourusername/react-export-components";

function App() {
  const handleExport = async (payload) => {
    // Your custom export logic
    return {
      jobId: "unique-job-id",
      fileName: "my-export.xlsx",
    };
  };

  return (
    <ExportButton
      payload={{ data: "your export data" }}
      onExport={handleExport}
      exportEndpoint="/api/export/generate"
      downloadEndpoint="/api/export/download"
      themeColor="#1976d2"
      moduleName="My Module"
    >
      Export Data
    </ExportButton>
  );
}

Props

| Prop | Type | Default | Description | | ------------------ | ----------- | ------------------------ | ---------------------------------- | | payload | object | {} | Data to be exported | | onExport | function | undefined | Custom export handler function | | exportEndpoint | string | "/api/export/generate" | API endpoint for export generation | | downloadEndpoint | string | "/api/export/download" | API endpoint for file download | | stompConfig | object | See below | STOMP configuration | | themeColor | string | "#1976d2" | Primary color theme | | moduleName | string | "Export Module" | Module name displayed in overlay | | disabled | boolean | false | Disable the button | | children | ReactNode | "Export" | Button content |

Default STOMP Config

{
  brokerURL: 'ws://localhost:8080/ws',
  connectHeaders: {},
  debug: function (str) { console.log(str); },
  reconnectDelay: 5000,
  heartbeatIncoming: 4000,
  heartbeatOutgoing: 4000,
}

ExportOverlay

A full-screen overlay component that shows export progress.

import React from "react";
import { ExportOverlay } from "@yourusername/react-export-components";

function App() {
  return (
    <ExportOverlay
      progress={75}
      isLoading={true}
      handleDownload={(jobId) => console.log("Download:", jobId)}
      handleClose={() => console.log("Close overlay")}
      exportGenerateData={{ jobId: "123", fileName: "export.xlsx" }}
      moduleName="My Module"
      themeColor="#1976d2"
    />
  );
}

Props

| Prop | Type | Default | Description | | -------------------- | ---------- | ----------------- | --------------------------- | | progress | number | 0 | Progress percentage (0-100) | | isLoading | boolean | false | Loading state | | handleDownload | function | Required | Download handler function | | handleClose | function | Required | Close overlay handler | | exportGenerateData | object | {} | Export job data | | moduleName | string | "Export Module" | Module name | | themeColor | string | "#1976d2" | Primary color theme |

Example Usage

import React, { useState } from "react";
import { ExportButton, ExportOverlay } from "@yourusername/react-export-components";

function MyComponent() {
  const exportData = {
    filters: { status: "active" },
    format: "xlsx",
  };

  return (
    <div>
      <h1>My Application</h1>
      <ExportButton payload={exportData} themeColor="#4caf50" moduleName="User Data">
        Export Users
      </ExportButton>
    </div>
  );
}

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev

License

MIT