Hooks Reference

import { useProject } from "@retab/react";

function ProjectInfo() {
  const { project } = useProject();

  return (
    <div>
      <h2>{project.name}</h2>
      <p>Schema: {project.published_config.json_schema.title}</p>
    </div>
  );
}

import { useExtractions } from "@retab/react";

function ExtractionSelector() {
  const { extractions, selectedExtractionId, setSelectedExtractionId } =
    useExtractions();

  return (
    <ul>
      {extractions.map((extraction) => (
        <li
          key={extraction.id}
          onClick={() => setSelectedExtractionId(extraction.id)}
          style={{
            fontWeight:
              extraction.id === selectedExtractionId ? "bold" : "normal",
          }}
        >
          {extraction.file.filename}
        </li>
      ))}
    </ul>
  );
}

import { useOptionalExtractions } from "@retab/react";

function OptionalExtractionInfo() {
  const extractionsContext = useOptionalExtractions();

  if (!extractionsContext) {
    return <p>Extractions context not available</p>;
  }

  return <p>Selected: {extractionsContext.selectedExtractionId}</p>;
}

import { useExtraction } from "@retab/react";

function ExtractionDetails({ extractionId }: { extractionId: string }) {
  const { data: extraction, isLoading, error } = useExtraction(extractionId);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!extraction) return <p>Not found</p>;

  return (
    <div>
      <h3>{extraction.file.filename}</h3>
      <pre>{JSON.stringify(extraction.predictions, null, 2)}</pre>
    </div>
  );
}

import { useExtractionList } from "@retab/react";
import { useState } from "react";

function FilteredExtractions({ projectId }: { projectId: string }) {
  const [cursor, setCursor] = useState<string | null>(null);

  const { data, isLoading } = useExtractionList({
    origin_dot_id: projectId,
    limit: 10,
    order: "desc",
    after: cursor || undefined,
  });

  if (isLoading) return <p>Loading...</p>;

  const extractions = data?.data || [];
  const metadata = data?.list_metadata;

  return (
    <div>
      <ul>
        {extractions.map((ext) => (
          <li key={ext.id}>{ext.file.filename}</li>
        ))}
      </ul>
      {metadata?.after && (
        <button onClick={() => setCursor(metadata.after)}>Next Page</button>
      )}
    </div>
  );
}

import { useJsonSchema } from "@retab/react";

function SchemaViewer() {
  const { computedSchema, jsonSchema } = useJsonSchema();

  return (
    <div>
      <h3>Schema Properties</h3>
      <ul>
        {Object.keys(computedSchema.properties || {}).map((key) => (
          <li key={key}>
            {key}: {computedSchema.properties[key].type}
          </li>
        ))}
      </ul>
    </div>
  );
}

import { useAuth } from "@retab/react";

function CustomApiCall() {
  const { fetchWithAuth } = useAuth();

  const handleClick = async () => {
    const response = await fetchWithAuth("/v1/extractions");
    const data = await response.json();
    console.log(data);
  };

  return <button onClick={handleClick}>Fetch Extractions</button>;
}

import { useOCR } from "@retab/react";

function FieldSources({ extractionId, fieldPath }) {
  const { getFieldSources, isLoading } = useOCR();

  if (isLoading) return <p>Loading sources...</p>;

  const sources = getFieldSources(extractionId, fieldPath);

  return (
    <div>
      <h4>Sources for {fieldPath}</h4>
      <ul>
        {sources.map((source, i) => (
          <li key={i}>
            Page {source.page}: "{source.text}"
          </li>
        ))}
      </ul>
    </div>
  );
}

interface Extraction {
  id: string;
  file: {
    id: string;
    filename: string;
    mimeType: string;
  };
  predictions: Record<string, any>;
  predictions_draft?: Record<string, any>;
  metadata?: Record<string, string>;
  created_at: string;
}

interface PaginationMetadata {
  before?: string | null;
  after?: string | null;
}