Customizing the UI

import { PDFViewer } from '@embedpdf/react-pdf-viewer';
 
export default function App() {
  return (
    <PDFViewer 
      config={{
        src: 'https://snippet.embedpdf.com/ebook.pdf',
        disabledCategories: ['annotation', 'print', 'export']
      }}
    />
  );
}

import { PDFViewer, PDFViewerRef } from '@embedpdf/react-pdf-viewer';
import { useRef, useEffect } from 'react';
 
export default function CustomViewer() {
  const viewerRef = useRef<PDFViewerRef>(null);
 
  useEffect(() => {
    const setupCustomUI = async () => {
      const registry = await viewerRef.current?.registry;
      if (!registry) return;
 
      const commands = registry.getPlugin('commands').provides();
      const ui = registry.getPlugin('ui').provides();
 
      // Register a custom command
      commands.registerCommand({
        id: 'custom.hello',
        label: 'Say Hello',
        icon: 'smiley',
        action: () => alert('Hello from my custom button!')
      });
 
      // Add it to the toolbar
      // ... (see below)
    };
 
    setupCustomUI();
  }, []);
 
  return <PDFViewer ref={viewerRef} config={{ src: '/doc.pdf' }} />;
}

// Register during setup
viewerRef.current?.registerIcon('smiley', {
  viewBox: '0 0 24 24',
  paths: [
    { d: 'M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0', stroke: 'currentColor', fill: 'none' },
    { d: 'M9 10l.01 0', stroke: 'currentColor', fill: 'none' },
    { d: 'M15 10l.01 0', stroke: 'currentColor', fill: 'none' },
    { d: 'M9.5 15a3.5 3.5 0 0 0 5 0', stroke: 'currentColor', fill: 'none' }
  ]
});

const schema = ui.getSchema();
const toolbar = schema.toolbars['main-toolbar'];
 
// Clone and modify the items
const items = JSON.parse(JSON.stringify(toolbar.items));
const rightGroup = items.find(item => item.id === 'right-group');
 
if (rightGroup) {
  // Add our custom button
  rightGroup.items.push({
    type: 'command-button',
    id: 'smiley-button',
    commandId: 'custom.hello',
    variant: 'icon'
  });
}
 
// Apply the changes
ui.mergeSchema({
  toolbars: { 'main-toolbar': { ...toolbar, items } }
});