Middesk View Component

A React component library for displaying Middesk business verification data with a clean, customizable UI.

Features

• Display business verification data from Middesk API
• Pre-built cards for different data sections (Business Details, People, Watchlists, etc.)
• Fully typed TypeScript support
• Tailwind CSS styling
• Integration with safeturf-ui-kit theme system

Installation

Option 1: Install from npm (if published)

npm install middesk-view-component

Option 2: Install locally

# In your project
npm install /path/to/middeskViewComponent-main

Option 3: Link for development

# In this component directory
npm link

# In your project directory
npm link middesk-view-component

Usage

Basic Example

import React from 'react';
import { MiddeskBusinessView } from 'middesk-view-component';
import { ThemeProvider } from 'safeturf-ui-kit';
import 'middesk-view-component/style.css';

function App() {
  const [businessData, setBusinessData] = useState(null);

  // Fetch your Middesk data
  useEffect(() => {
    fetch('https://api.middesk.com/v1/businesses/YOUR_BUSINESS_ID', {
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY'
      }
    })
      .then(res => res.json())
      .then(data => setBusinessData(data));
  }, []);

  return (
    <ThemeProvider theme="light">
      <div className="p-6">
        <MiddeskBusinessView data={businessData} />
      </div>
    </ThemeProvider>
  );
}

Using Individual Cards

You can also import and use individual cards:

import {
  BusinessDetailsCard,
  PeopleCard,
  WatchlistsCard,
  extractMiddeskData
} from 'middesk-view-component';

function MyCustomView({ data }) {
  const middeskData = extractMiddeskData(data);

  return (
    <div>
      <BusinessDetailsCard data={middeskData?.businessDetails} />
      <PeopleCard data={middeskData?.people} />
    </div>
  );
}

Available Components

• MiddeskBusinessView - Main component that displays all sections
• BusinessDetailsCard - Business information, TIN, addresses, etc.
• PeopleCard - Associated people and their details
• WatchlistsCard - Watchlist screening results
• IndustryClassificationCard - Industry classification data
• VerificationSummary - Overview of verification status

Available Functions

• extractMiddeskData(data) - Utility function to map Middesk API response to component props

Development

Run Demo

npm run dev

This will start a development server at http://localhost:3000 showing the demo with sample data.

Build Library

npm run build:lib

This creates the distributable library files in the dist/ folder.

Build Regular App

npm run build

Dependencies

This component requires the following peer dependencies:

• react >= 18.2.0
• react-dom >= 18.2.0
• safeturf-ui-kit >= 1.0.2

Props

MiddeskBusinessView

| Prop | Type | Required | Description | |------|------|----------|-------------| | data | any | No | The Middesk API response object |

Styling

The component uses Tailwind CSS. Make sure to:

1. Import the component's styles: import 'middesk-view-component/style.css'
2. Wrap your app with ThemeProvider from safeturf-ui-kit

License

MIT