Package Exports

captide
captide/dist/index.esm.js
captide/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (captide) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Captide - Financial Document Viewer

Get hundreds of thousands of financial documents into your AI app 🚀

Features

Render SEC filings (10-K, 10-Q, 8-K, 20-F, 40-F, 6-K)
Support for earnings call transcripts
Element-based highlighting
Support for PDF and Excel documents
Shareable links to specific sections
Zoom controls

Installation

npm install captide
# or
yarn add captide

Basic Usage

import { DocumentViewer, DocumentViewerProvider } from 'captide';

function App() {
  return (
    <DocumentViewerProvider>
      <div style={{ height: '800px' }}>
        <DocumentViewer 
          enableShareableLinks={true}
          shareableLinkBaseUrl="https://yourdomain.com"
        />
      </div>
    </DocumentViewerProvider>
  );
}

Server-Side Rendering (SSR) Compatibility

Captide is designed to work seamlessly in both client and server environments.

Next.js App Router Usage (Recommended)

When using Captide with Next.js App Router, add the 'use client' directive to mark the component as client-side only:

'use client';

import { DocumentViewer, DocumentViewerProvider } from 'captide';

export default function DocumentViewerPage() {
  return (
    <DocumentViewerProvider>
      <div style={{ height: '100vh' }}>
        <DocumentViewer />
      </div>
    </DocumentViewerProvider>
  );
}

Next.js Pages Router Usage

When using Captide with Next.js Pages Router, the component will work, but to avoid SSR-related issues with browser-specific APIs like DOMMatrix, you may need to use dynamic imports:

// pages/document-viewer.js
import dynamic from 'next/dynamic';

// Import with no SSR
const DocumentViewer = dynamic(
  () => import('captide').then(mod => mod.DocumentViewer),
  { ssr: false }
);

const DocumentViewerProvider = dynamic(
  () => import('captide').then(mod => mod.DocumentViewerProvider),
  { ssr: false }
);

export default function DocumentViewerPage() {
  return (
    <DocumentViewerProvider>
      <div style={{ height: '100vh' }}>
        <DocumentViewer />
      </div>
    </DocumentViewerProvider>
  );
}

Document Types

Captide supports various document types:

HTML Documents - SEC filings, transcripts, and other HTML-based documents
PDF Documents - Direct PDF viewing with page navigation
Spreadsheet Files - Excel files with download/open options

The DocumentViewer component automatically selects the appropriate viewer based on the document properties.

API Reference

DocumentViewer

<DocumentViewer
  className="w-full h-full"
  showZoomControls={true}
  enableShareableLinks={true}
  shareableLinkBaseUrl="https://yourdomain.com"
  shareableLinkButtonColor="#2563eb"
  viewerRoutePath="document-viewer"
/>

DocumentViewerProvider

<DocumentViewerProvider
  initialState={{
    document: myDocument,
    highlightedElementId: 'section-1',
    zoomLevel: 1.0
  }}
>
  {children}
</DocumentViewerProvider>

useDocumentViewer Hook

import { useDocumentViewer } from 'captide';

function MyComponent() {
  const { 
    document,
    highlightedElementId,
    setDocument,
    setHighlightedElementId,
    zoomIn,
    zoomOut,
    resetZoom
  } = useDocumentViewer();
  
  return (
    // Your component implementation
  );
}

License

MIT