React Integration

npm install @trexolab/verifykit-react

import '@trexolab/verifykit-react/styles.css'

cp -r node_modules/@trexolab/verifykit-react/cmaps public/cmaps
cp -r node_modules/@trexolab/verifykit-react/standard_fonts public/standard_fonts

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

import { VerifyKitProvider } from '@trexolab/verifykit-react'
 
function App() {
  return (
    <VerifyKitProvider config={{
      workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
      theme: { mode: 'system' },
    }}>
      <div style={{ height: '100vh' }}>
        <MyViewer />
      </div>
    </VerifyKitProvider>
  )
}

<VerifyKitProvider config={config}>
  <App />
</VerifyKitProvider>

interface VerifyKitConfig extends VerifyKitCoreConfig {
  workerUrl: string            // REQUIRED. URL to the PDF.js worker script.
  cMapUrl?: string              // Default: '/cmaps/'
  standardFontDataUrl?: string  // Default: '/standard_fonts/'
  theme?: {
    mode?: 'light' | 'dark' | 'system'
    overrides?: Record<string, string>  // CSS variable overrides
  }
  embeddedFont?: boolean | string
  toolbar?: ToolbarConfig
  locale?: string           // Default: 'en'
  translations?: Partial<TranslationStrings>
}

const verification = useVerification()
 
// Load a file (File, ArrayBuffer, Uint8Array, or URL)
await verification.load(file)
 
// Access results
verification.fileBuffer      // ArrayBuffer | null — the loaded PDF bytes
verification.originalFileBuffer // ArrayBuffer | null — original file bytes (before appearance swap)
verification.fileName        // string — display name of the loaded file
verification.signatures      // PdfSignature[] — all verified signatures
verification.status          // 'valid' | 'invalid' | 'warning' | 'unknown' | 'pending' | null
verification.unsignedFields  // UnsignedSigField[] — unsigned signature fields
verification.isLoading       // boolean — true while verification is in progress
verification.error           // LoadError | null — error object if verification failed
verification.result          // VerificationResult | null — full verification result object
verification.metadata        // DocumentMetadata | null — PDF document metadata
verification.permissions     // DocumentPermissions | null — PDF security permissions
 
// Re-verify all signatures on the current buffer
await verification.revalidate()
 
// Reset state
verification.reset()

// Optional — only if your app unlocks the document outside VerifyKit's viewer.
await verification.applyPassword(userPassword)

<Viewer
  ref={viewerRef}
  fileBuffer={verification.fileBuffer}
  fileName={verification.fileName}
  plugins={[layout.plugin]}
  onOpenFile={handleFile}
  signatures={verification.signatures}
  unsignedFields={verification.unsignedFields}
  verificationStatus={verification.status ?? undefined}
/>

const viewerRef = useRef<ViewerHandle>(null)
viewerRef.current.scrollToPage(5)

import { defaultLayoutPlugin } from '@trexolab/verifykit-react'
 
function MyViewer() {
  const [layout] = useState(() => defaultLayoutPlugin())
 
  return <Viewer fileBuffer={buffer} plugins={[layout.plugin]} />
}

const [layout] = useState(() =>
  defaultLayoutPlugin({
    disable: { print: true, download: true, contextMenu: true },
  })
)

const [layout] = useState(() =>
  defaultLayoutPlugin({
    zoom: { minScale: 0.5, maxScale: 4 },
    // Floating previous/next control over the bottom of the page in
    // single-page scroll mode, on by default. Single-page is the one mode
    // where scrolling cannot reach the next page, so turning this off leaves
    // the toolbar as the only way forward.
    pageNavigation: { floatingNav: false },
  })
)

import { zoomPlugin, pageNavigationPlugin, toolbarPlugin } from '@trexolab/verifykit-react'
 
const [zoom] = useState(() => zoomPlugin())
const [nav] = useState(() => pageNavigationPlugin())
const [toolbar] = useState(() => toolbarPlugin())
 
<Viewer fileBuffer={buffer} plugins={[zoom, nav, toolbar]} />

import { WelcomeScreen } from '@trexolab/verifykit-react'
 
if (!verification.fileBuffer) {
  return <WelcomeScreen onOpenFile={handleFile} />
}

<VerifyKitProvider config={{
  workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
  theme: { mode: 'system' },
}}>

<VerifyKitProvider config={{
  workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
  theme: {
    mode: 'dark',
    overrides: {
      '--primary': '#6366f1',
      '--primary-hover': '#4f46e5',
    },
  },
}}>

const [layout] = useState(() => defaultLayoutPlugin())
 
// Toggle between light and dark
layout.theme.toggleTheme()
 
// Set explicitly
layout.theme.setTheme('dark')

import { useState, useCallback, useRef } from 'react'
import {
  VerifyKitProvider,
  Viewer,
  WelcomeScreen,
  useVerification,
  defaultLayoutPlugin,
} from '@trexolab/verifykit-react'
import '@trexolab/verifykit-react/styles.css'
 
function App() {
  return (
    <VerifyKitProvider config={{
      workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
      theme: { mode: 'system' },
    }}>
      <div style={{ height: '100vh' }}>
        <MyViewer />
      </div>
    </VerifyKitProvider>
  )
}
 
function MyViewer() {
  const verification = useVerification()
  const viewerRef = useRef(null)
  const [layout] = useState(() => defaultLayoutPlugin())
 
  const handleFile = useCallback(
    (file) => { verification.load(file) },
    [verification],
  )
 
  if (!verification.fileBuffer) {
    return <WelcomeScreen onOpenFile={handleFile} />
  }
 
  return (
    <Viewer
      ref={viewerRef}
      fileBuffer={verification.fileBuffer}
      fileName={verification.fileName}
      plugins={[layout.plugin]}
      onOpenFile={handleFile}
      signatures={verification.signatures}
      unsignedFields={verification.unsignedFields}
      verificationStatus={verification.status ?? undefined}
    />
  )
}

import { useViewerStore, useViewerStoreKey } from '@trexolab/verifykit-react'
 
// Select multiple values
const [page, total] = useViewerStore(s => [s.currentPage, s.totalPages])
 
// Select a single key
const scale = useViewerStoreKey('scale')

// app/page.tsx — a Server Component. Note: no 'use client' in this file.
import { VerifyKitProvider, Viewer } from '@trexolab/verifykit-react'
import '@trexolab/verifykit-react/styles.css'
 
export default function Page() {
  return (
    <VerifyKitProvider
      config={{ workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs' }}
    >
      <div style={{ height: '100vh' }}>
        <Viewer />
      </div>
    </VerifyKitProvider>
  )
}

// app/verify/page.tsx
'use client'
 
import { useState } from 'react'
import {
  VerifyKitProvider, Viewer, useVerification, defaultLayoutPlugin,
} from '@trexolab/verifykit-react'
import '@trexolab/verifykit-react/styles.css'
 
function Inner() {
  const verification = useVerification()
  const [layout] = useState(() => defaultLayoutPlugin())
 
  return (
    <div style={{ height: '100vh' }}>
      <Viewer
        fileBuffer={verification.fileBuffer ?? undefined}
        fileName={verification.fileName}
        plugins={[layout.plugin]}
        onOpenFile={(file) => verification.load(file)}
        signatures={verification.signatures}
        unsignedFields={verification.unsignedFields}
        verificationStatus={verification.status ?? undefined}
        verifying={verification.isLoading}
      />
    </div>
  )
}
 
export default function Page() {
  return (
    <VerifyKitProvider
      config={{ workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs' }}
    >
      <Inner />
    </VerifyKitProvider>
  )
}

import { t, setLocale, registerLocale } from '@trexolab/verifykit-react'
 
// Get a translated string
const label = t('signature.valid')
 
// Switch locale at runtime
setLocale('fr')
 
// Register a custom locale
registerLocale('fr', { 'signature.valid': 'Signature valide', /* ... */ })