Hooks & Store

The MIMS SDK provides React hooks and a Zustand store for accessing SDK functionality and managing document state.

Available Hooks

useSDK

Access the SDK context including initialization status, organization info, and API methods.

useDocument

Get the current document state including loading status, pages, and dirty state.

useDocumentStore

Full access to the Zustand document store with all state and actions.

Quick Reference

SDK Hooks

These hooks provide access to the SDK context and initialization state:

SDK Hookstsx

import { useSDK, useSDKReady } from '@mims/sdk-react';

function MyComponent() {
  // Full SDK context access
  const { 
    isInitialized, 
    isValidating, 
    validationError,
    organizationId,
    organizationName,
    scopes,
    config,
    apiRequest 
  } = useSDK();

  // Simple boolean check
  const isReady = useSDKReady();

  if (!isReady) {
    return <div>Loading SDK...</div>;
  }

  return <div>Organization: {organizationName}</div>;
}

Document Hooks

These hooks provide access to document state and field management:

Document Hookstsx

import { 
  useDocument, 
  useDocumentStore,
  useCurrentPageFields, 
  useSelectedField 
} from '@mims/sdk-react';

function DocumentInfo() {
  // Basic document state (read-only)
  const { 
    documentId, 
    isLoading, 
    currentPage, 
    totalPages,
    isDirty 
  } = useDocument();

  // Fields on current page
  const currentFields = useCurrentPageFields();

  // Currently selected field
  const selectedField = useSelectedField();

  // Full store access with actions
  const { goToPage, setFieldValue, validateFields } = useDocumentStore();

  return (
    <div>
      <p>Page {currentPage} of {totalPages}</p>
      <p>{currentFields.length} fields on this page</p>
      {isDirty && <p>Unsaved changes</p>}
    </div>
  );
}

Hook Requirements

All SDK hooks must be used within a MIMSProvider component. Using them outside the provider will throw an error.

Architecture Overview

The MIMS SDK uses a two-layer state management approach:

React Context (useSDK): Manages SDK configuration, authentication, and API access. This is initialized once when the MIMSProvider mounts.
Zustand Store (useDocumentStore): Manages document-specific state including pages, fields, and values. This provides fine-grained subscriptions for optimal performance.

Architecturetsx

// SDK Context Layer
<MIMSProvider apiKey="pk_...">
  {/* Zustand Store Layer - automatic */}
  <PDFViewer documentId="doc_123" />
</MIMSProvider>

// The PDFViewer internally uses useDocumentStore
// to manage document state independently of the SDK context

Selective Subscriptions

The Zustand store supports selective subscriptions to prevent unnecessary re-renders:

Selective Subscriptionstsx

import { useDocumentStore } from '@mims/sdk-react';

// Only re-renders when currentPage changes
function PageIndicator() {
  const currentPage = useDocumentStore((state) => state.currentPage);
  const totalPages = useDocumentStore((state) => state.totalPages);
  return <span>Page {currentPage} / {totalPages}</span>;
}

// Only re-renders when specific field changes
function FieldStatus({ fieldId }: { fieldId: string }) {
  const field = useDocumentStore((state) => state.fields.get(fieldId));
  return field?.touched ? <span>Modified</span> : null;
}

TypeScript Support

All hooks are fully typed. Import types for custom implementations:

TypeScript Typestsx

import type {
  SDKConfig,
  FieldState,
  AnyFieldDefinition,
  AnyFieldValue,
  DocumentSubmissionPayload,
  RenderContext,
  PageInfo,
} from '@mims/sdk-react';