@monarkmarkets/marketplace

A package of reusable React components for displaying pre-IPO company data and SPV investment opportunities.

Installation

npm install @monarkmarkets/marketplace

Features

• Auto-fetching tables - Tables that handle their own data fetching and pagination
• Responsive design - Clean, modern styling that works across devices
• Customizable - Configurable appearance and behavior

Components

PrimaryTable

Displays SPV investment opportunities with built-in data fetching from the SPV service.

import { PrimaryTable } from '@monarkmarkets/marketplace-components';

function MyPage() {
  return (
    <PrimaryTable
      investorId="investor-123"
      buttonText="Invest"
      searchTerm="AI"
      onButtonClick={(companyId, investorId) => {
        // Handle button click
      }}
      onDataLoaded={(data, totalPages) => {
        // Handle data loaded event
      }}
    />
  );
}

PrivateTable

Displays pre-IPO company information with built-in data fetching from the company service.

import { PrivateTable } from '@monarkmarkets/marketplace-components';

function MyPage() {
  return (
    <PrivateTable
      investorId="investor-123"
      buttonText="Submit IOI"
      searchTerm="fintech"
      onButtonClick={(companyId, investorId) => {
        // Handle button click
      }}
      onDataLoaded={(data, totalPages) => {
        // Handle data loaded event
      }}
    />
  );
}

Props

Common Props (BaseTableProps)

| Prop | Type | Default | Description | |------|------|---------|-------------| | investorId | string | (required) | ID of the investor | | onButtonClick | (companyId: string, investorId: string) => void | undefined | Callback for button clicks | | buttonText | string | "Invest" or "Submit IOI" | Text to display on the action button | | isLoading | boolean | false | External loading state | | initialPage | number | 1 | Initial page to display | | pageSize | number | 10 | Number of items per page | | searchTerm | string | '' | Search term to filter results | | onPageChange | (page: number) => void | undefined | Callback for page changes |

PrimaryTable Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onDataLoaded | (data: IPreIPOCompanySPV[], totalPages: number) => void | undefined | Callback when data is loaded |

PrivateTable Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onDataLoaded | (data: IPreIPOCompany[], totalPages: number) => void | undefined | Callback when data is loaded |

Example

Here's a complete example of using both tables in a marketplace page:

import React, { useState } from 'react';
import { PrivateTable, PrimaryTable } from '@monarkmarkets/marketplace-components';

const MarketplacePage = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [ioiSearchQuery, setIoiSearchQuery] = useState('');
  const [spvSearchQuery, setSpvSearchQuery] = useState('');
  
  const handleDataLoaded = () => {
    setIsLoading(false);
  };
  
  const handleIOIButtonClick = (companyId, investorId) => {
    // Navigate to company details
  };
  
  const handleSPVButtonClick = (companyId, investorId) => {
    // Navigate to SPV details
  };
  
  return (
    <div>
      <h1>Marketplace</h1>
      
      <div>
        <h2>Private Companies</h2>
        <input 
          type="text" 
          value={ioiSearchQuery} 
          onChange={(e) => setIoiSearchQuery(e.target.value)} 
          placeholder="Search companies..."
        />
        <PrivateTable
          investorId="investor-123"
          buttonText="Submit IOI"
          searchTerm={ioiSearchQuery}
          onButtonClick={handleIOIButtonClick}
          onDataLoaded={handleDataLoaded}
        />
      </div>
      
      <div>
        <h2>SPV Opportunities</h2>
        <input 
          type="text" 
          value={spvSearchQuery} 
          onChange={(e) => setSpvSearchQuery(e.target.value)} 
          placeholder="Search SPVs..."
        />
        <PrimaryTable
          investorId="investor-123"
          buttonText="Invest"
          searchTerm={spvSearchQuery}
          onButtonClick={handleSPVButtonClick}
          onDataLoaded={handleDataLoaded}
        />
      </div>
    </div>
  );
};

Dependencies

• React 18.0+
• @monarkmarkets/api-client

License

Copyright © 2025 Monark Markets. All rights reserved.