Structura Library

A React component library for document viewing and processing.

Installation

npm install structura_lib

Usage

import { Structura } from 'structura-lib';
import 'structura_lib/dist/styles.css'

function App() {
  return (
    <Structura
      // API Configuration
      props={{
        APIKey: "your-api-key"
      }}
      
      // PDF Source Options (use one of these)
      fileURL="https://example.com/document.pdf"
      
      // JSON Data
      initialJsonData={processedJsonData}
      
      // UI Options
      showHeaders={true}
      showActionBar={false}
      documentHeader="PdfViewer"
      JsonViewerHeader="Processed Output"
    />
  );
}

Props

API Configuration

• props (required): Object containing API configuration
  • APIKey (required): Your API key for the Structura service
  • baseURL (optional): Custom base URL for the API endpoints

PDF Source Options

Choose one of these methods to provide a PDF document:

• fileURL (optional): URL to a PDF file

JSON Data

• initialJsonData (optional): Pre-processed JSON data from the Structura API. If provided, the component will skip the PDF processing step and display the structured data directly.

JSON Change Callback

• onJsonChange (optional): Function called with the latest JSON whenever the user makes an edit in the HtmlViewer. Receives the updated JSON as its argument.

UI Options

• showHeaders (optional, default: false): Whether to show header sections in the PDF and HTML viewers
• showActionBar (optional, default: false): Whether to show actions for showing JSON

Features

• Dual View: View documents in both PDF and structured HTML formats
• Interactive Highlighting: Click elements in either view to highlight corresponding elements in the other view
• Drag & Drop: Upload PDF files by dragging and dropping
• Real-time Processing: Process PDFs through the Structura API to extract structured data
• Responsive Design: Works on both desktop and mobile devices
• Customizable UI: Control header visibility and other UI elements

Examples

Basic Usage with File Upload

<Structura
  props={{
    APIKey: "your-api-key"
  }}
/>

Pre-loaded PDF with URL

<Structura
  props={{
    APIKey: "your-api-key"
  }}
  fileURL="https://example.com/document.pdf"
/>

Pre-processed Data

<Structura
  props={{
    APIKey: "your-api-key"
  }}
  fileURL="https://example.com/document.pdf"
  initialJsonData={processedData}
/>

Custom UI Configuration

<Structura
  props={{
    APIKey: "your-api-key",
    baseURL: "https://custom-api.example.com"
  }}
  fileURL="https://example.com/document.pdf"
  showHeaders={true}
/>

Receive Updated JSON on Edit

<Structura
  props={{
    APIKey: "your-api-key"
  }}
  initialJsonData={processedData}
  onJsonChange={(updatedJson) => {
    // Handle the updated JSON here (e.g., save to state, send to server, etc.)
    console.log('Updated JSON:', updatedJson);
  }}
/>