Customization

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

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

const viewer = VerifyKit.create(el, {
  workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
  theme: { mode: 'system' },
})
 
// Change at runtime
viewer.setTheme('dark')

viewer.on('themeChange', (mode) => {
  console.log('Theme changed to:', mode)
})

<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',
    },
  },
}}>

:root {
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --toolbar-bg: #1a1a2e;
}

const [layout] = useState(() =>
  defaultLayoutPlugin({
    disable: {
      search: true,
      print: true,
      download: true,
      rotation: true,
      fullscreen: true,
      theme: true,
      selection: true,
      openFile: true,
      contextMenu: true,
      properties: true,
      shortcuts: true,
    },
  })
)

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]} />

const viewer = VerifyKit.create(el, {
  workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
  features: {
    search: true,        // default: true
    print: true,         // default: true
    download: false,     // default: false
    signatures: true,    // default: true
    thumbnails: true,    // default: true
    fullscreen: true,    // default: true
    themeToggle: true,   // default: true
    openFile: false,     // default: false
    rotation: true,      // default: true
    contextMenu: true,   // default: true
    properties: true,    // default: true
    shortcuts: true,     // default: true
    highlights: true,    // default: true
  },
})

// Set initial scale via defaultLayoutPlugin
const [layout] = useState(() =>
  defaultLayoutPlugin({
    accessibility: { initialScale: 'large' },
  })
)
 
// Programmatic control
layout.accessibility.setFontScale('extra-large')
layout.accessibility.getFontScale() // 'extra-large'
 
// Disable the feature entirely
defaultLayoutPlugin({
  disable: { accessibility: true },
})

const viewer = VerifyKit.create(el, {
  workerUrl: '...',
  features: { accessibility: true }, // default: true
})
 
viewer.setFontScale('large')
viewer.getFontScale() // 'large'
 
// Listen for changes
viewer.on('fontScaleChange', (scale) => {
  console.log('Font scale changed to:', scale)
})

import { accessibilityPlugin } from '@trexolab/verifykit-react'
 
const a11y = accessibilityPlugin({
  initialScale: 'large',  // 'compact' | 'default' | 'large' | 'extra-large'
  persist: true,           // save to localStorage (default: true)
})
 
<Viewer plugins={[a11y, ...otherPlugins]} />
 
// API
a11y.api.setFontScale('extra-large')
a11y.api.getFontScale()

/* Custom scale overrides */
.verifykit-root[data-font-scale="large"] {
  --ui-scale: 1.20;  /* adjust from default 1.15 */
  --font-base: calc(13px * 1.20);
  --btn-size: calc(26px * 1.20);
  --toolbar-height: calc(36px * 1.20);
}

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

const viewer = VerifyKit.create(el, {
  workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
})

cp node_modules/pdfjs-dist/legacy/build/pdf.worker.min.mjs public/

<VerifyKitProvider config={{ workerUrl: '/pdf.worker.min.mjs' }}>

const viewer = VerifyKit.create(el, {
  workerUrl: '/pdf.worker.min.mjs',
})

cp -r node_modules/pdfjs-dist/cmaps public/cmaps
cp -r node_modules/pdfjs-dist/standard_fonts public/standard_fonts

<VerifyKitProvider config={{
  workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
  cMapUrl: '/assets/cmaps/',
  standardFontDataUrl: '/assets/standard_fonts/',
}}>

import { swapSignatureAppearances, hasAcro6Appearances } from '@trexolab/verifykit-react'
 
// After verification
const result = await verifier.verify(pdfBytes)
const hasAcro6 = await hasAcro6Appearances(pdfBytes)
 
if (hasAcro6 || result.signatures.some(s => s.isVisible)) {
  const modifiedPdf = await swapSignatureAppearances(pdfBytes, result.signatures)
  // Use modifiedPdf for display in PDF.js
}

function myPlugin(): ViewerPlugin {
  return {
    name: 'my-plugin',
    install(ctx) {
      ctx.registerShortcut({
        id: 'my-action',
        key: 'g',
        ctrl: true,
        description: 'Go to page',
        handler(e) {
          e.preventDefault()
          // your action
        },
      })
    },
  }
}