Scroll, zoom & layout

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './basic.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin, useStage, useStageState } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './zoom.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

function ZoomToolbar() {
  const stage = useStage();
  const { zoomLevel, zoomMode } = useStageState();

  return (
    <div className="toolbar">
      <button
        type="button"
        className="button"
        aria-label="Zoom out"
        onClick={() => stage.zoomOut()}
      >
        −
      </button>
      <output className="readout">{Math.round(zoomLevel * 100)}%</output>
      <button type="button" className="button" aria-label="Zoom in" onClick={() => stage.zoomIn()}>
        +
      </button>
      <div className="segmented" role="group" aria-label="Fit">
        <button
          type="button"
          aria-pressed={zoomMode === 'automatic'}
          onClick={() => stage.fitAutomatic()}
        >
          Automatic
        </button>
        <button
          type="button"
          aria-pressed={zoomMode === 'fit-page'}
          onClick={() => stage.fitPage()}
        >
          Fit page
        </button>
        <button
          type="button"
          aria-pressed={zoomMode === 'fit-width'}
          onClick={() => stage.fitWidth()}
        >
          Fit width
        </button>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <ZoomToolbar />
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { useState } from 'react';
import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin, useStage, useStageState } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './navigation.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

function PageToolbar() {
  const stage = useStage();
  const { currentPageIndex, pageCount } = useStageState();
  const [typed, setTyped] = useState('');

  // People count from 1, an index from 0. An index past the end goes to the last page.
  const jump = () => {
    const number = Number(typed);
    if (Number.isInteger(number) && number >= 1) stage.goToPage(number - 1);
    setTyped('');
  };

  return (
    <div className="toolbar">
      <button
        type="button"
        className="button"
        disabled={!stage.canGoPrevious()}
        onClick={() => stage.previousPage()}
      >
        ‹ Previous
      </button>
      <output className="badge">
        Page{' '}
        <strong>
          {currentPageIndex + 1} / {pageCount}
        </strong>
      </output>
      <button
        type="button"
        className="button"
        disabled={!stage.canGoNext()}
        onClick={() => stage.nextPage()}
      >
        Next ›
      </button>
      <input
        className="field"
        inputMode="numeric"
        aria-label="Go to page"
        placeholder="Go to page…"
        value={typed}
        onChange={(event) => setTyped(event.target.value)}
        onKeyDown={(event) => event.key === 'Enter' && jump()}
      />
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <PageToolbar />
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin, useStage, useStageSettings } from '@embedpdf/react/stage';
import type { FlowMode, LayoutKind, SpreadMode } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './layouts.css';

const engine = localEngine();
// Facing pages from the start, like a book.
const plugins = [stagePlugin({ spread: 'odd' }), renderPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

function LayoutControls() {
  const stage = useStage();
  const { flow, layout, spread } = useStageSettings();

  return (
    <div className="toolbar">
      <label className="label">
        Flow
        <select
          className="select"
          value={flow}
          onChange={(event) => stage.updateSettings({ flow: event.target.value as FlowMode })}
        >
          <option value="continuous">continuous</option>
          <option value="paged">paged</option>
        </select>
      </label>
      <label className="label">
        Layout
        <select
          className="select"
          value={layout}
          onChange={(event) => stage.updateSettings({ layout: event.target.value as LayoutKind })}
        >
          <option value="vertical">vertical</option>
          <option value="horizontal">horizontal</option>
          <option value="grid">grid</option>
        </select>
      </label>
      <label className="label">
        Spread
        <select
          className="select"
          value={spread}
          onChange={(event) => stage.updateSettings({ spread: event.target.value as SpreadMode })}
        >
          <option value="none">none</option>
          <option value="odd">odd</option>
          <option value="even">even</option>
        </select>
      </label>
      <div className="pager">
        <button
          type="button"
          className="button"
          aria-label="Previous"
          onClick={() => stage.previousPage()}
        >
          ‹
        </button>
        <button type="button" className="button" aria-label="Next" onClick={() => stage.nextPage()}>
          ›
        </button>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <LayoutControls />
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import {
  Stage,
  stagePlugin,
  useStage,
  useStageSettings,
  useStageState,
} from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './spacing.css';

const engine = localEngine();
// No responsive rules, so the padding you set applies at every width.
const plugins = [stagePlugin({ padding: 32, gap: { px: 12 }, responsive: [] }), renderPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

function SpacingControls() {
  const stage = useStage();
  const { padding, gap } = useStageSettings();
  const zoomLevel = useStageState((state) => state.zoomLevel);
  // A number grows with the zoom; { px } stays the same on screen.
  const onScreen = typeof gap !== 'number';
  const gapSize = typeof gap === 'number' ? gap : gap.px;

  return (
    <div className="toolbar">
      <label className="label">
        Padding
        <input
          className="range"
          type="range"
          min={0}
          max={64}
          value={padding}
          onChange={(event) => stage.updateSettings({ padding: Number(event.target.value) })}
        />
        <output className="value">{padding}</output>
      </label>
      <label className="label">
        Gap
        <input
          className="range"
          type="range"
          min={0}
          max={64}
          value={gapSize}
          onChange={(event) => {
            const size = Number(event.target.value);
            stage.updateSettings({ gap: onScreen ? { px: size } : size });
          }}
        />
        <output className="value">{gapSize}</output>
      </label>
      <div className="segmented" role="group" aria-label="Gap unit">
        <button
          type="button"
          aria-pressed={onScreen}
          onClick={() => stage.updateSettings({ gap: { px: gapSize } })}
        >
          Screen pixels
        </button>
        <button
          type="button"
          aria-pressed={!onScreen}
          onClick={() => stage.updateSettings({ gap: gapSize })}
        >
          Grows with zoom
        </button>
      </div>
      <div className="zoom">
        <button
          type="button"
          className="button"
          aria-label="Zoom out"
          onClick={() => stage.zoomOut()}
        >
          −
        </button>
        <output className="readout">{Math.round(zoomLevel * 100)}%</output>
        <button
          type="button"
          className="button"
          aria-label="Zoom in"
          onClick={() => stage.zoomIn()}
        >
          +
        </button>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <SpacingControls />
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { useState } from 'react';
import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import {
  Stage,
  stagePlugin,
  useStage,
  useStageSettings,
  useStageState,
} from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './responsive.css';

const engine = localEngine();

// Facing pages with a roomy margin, and one rule for a narrow Stage: a thin
// margin and one page at a time. The rule has a name, so the UI can read it too.
const plugins = [
  stagePlugin({
    padding: 24,
    spread: 'odd',
    responsive: [
      { name: 'compact', when: { maxWidth: 600 }, settings: { padding: 4, spread: 'none' } },
    ],
  }),
  renderPlugin(),
];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

function Toolbar({ narrow, onNarrow }: { narrow: boolean; onNarrow: (narrow: boolean) => void }) {
  const stage = useStage();
  // One breakpoint drives both the layout and this toolbar.
  const compact = useStageState((state) => state.activeRules.includes('compact'));
  const { padding, spread } = useStageSettings();

  return (
    <div className="toolbar">
      <div className="segmented" role="group" aria-label="Stage width">
        <button type="button" aria-pressed={!narrow} onClick={() => onNarrow(false)}>
          Full width
        </button>
        <button type="button" aria-pressed={narrow} onClick={() => onNarrow(true)}>
          360 px
        </button>
      </div>
      <output className="badge" data-on={compact}>
        compact <strong>{compact ? 'on' : 'off'}</strong>
      </output>
      <output className="badge">
        padding <strong>{padding}</strong> · spread <strong>{spread}</strong>
      </output>
      <div className="pager">
        <button type="button" className="button" onClick={() => stage.previousPage()}>
          {compact ? '‹' : '‹ Previous'}
        </button>
        <button type="button" className="button" onClick={() => stage.nextPage()}>
          {compact ? '›' : 'Next ›'}
        </button>
      </div>
    </div>
  );
}

export default function App() {
  const [narrow, setNarrow] = useState(false);

  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <Toolbar narrow={narrow} onNarrow={setNarrow} />
        <div className="frame" data-width={narrow ? 'narrow' : 'full'}>
          <Stage className="stage">{() => <RenderLayer />}</Stage>
        </div>
      </DocumentGate>
    </Viewer>
  );
}

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './page-labels.css';

const engine = localEngine();

// Reserve a 26px band below every page: the label lives there, so it never
// covers the page and keeps its size when you zoom.
const plugins = [stagePlugin({ pageFrame: { bottom: 26 } }), renderPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <Stage
          className="stage"
          pageChrome={(page) => (
            <div className="page-label" style={{ height: page.frame.bottom }}>
              Page {page.pageIndex + 1}
            </div>
          )}
        >
          {() => <RenderLayer />}
        </Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Scrollbar, Stage, stagePlugin, useScrollMetrics } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './scrollbar.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

// A reading-progress bar, from the same numbers a scrollbar uses.
function ReadingProgress() {
  const { scrollTop, scrollHeight, clientHeight } = useScrollMetrics();
  const travel = scrollHeight - clientHeight;
  const progress = travel > 0 ? Math.round((scrollTop / travel) * 100) : 0;

  return (
    <div
      className="progress"
      role="progressbar"
      aria-label="Reading progress"
      aria-valuenow={progress}
    >
      <div className="progress-fill" style={{ width: `${progress}%` }} />
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <ReadingProgress />
        <Stage
          className="stage"
          overlay={
            <Scrollbar axis="y" autoHide={1200} className="scrollbar" thumbClassName="thumb" />
          }
        >
          {() => <RenderLayer />}
        </Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { useEffect, useState } from 'react';
import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin, useStage, useStageState } from '@embedpdf/react/stage';
import type { RevealZoom } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './reveal.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

// Spots to jump to: a page index and a box in page coordinates (points from
// the page's top-left), like a search hit or a comment would give you.
const SPOTS = [
  { label: 'Top of page 2', page: 1, rect: { x: 72, y: 72, width: 468, height: 96 } },
  { label: 'Middle of page 3', page: 2, rect: { x: 72, y: 340, width: 468, height: 120 } },
  { label: 'Corner of page 4', page: 3, rect: { x: 330, y: 620, width: 210, height: 110 } },
];

const ZOOMS: { label: string; zoom: RevealZoom }[] = [
  { label: 'Keep zoom', zoom: 'keep' },
  { label: 'Fit width', zoom: 'fit-width' },
  { label: 'Fit the box', zoom: 'fit' },
];

export default function App() {
  const [active, setActive] = useState(0);
  const [zoom, setZoom] = useState<RevealZoom>('fit-width');

  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <SpotPicker active={active} zoom={zoom} onActive={setActive} onZoom={setZoom} />
        <Stage
          className="stage"
          pageChrome={(page) =>
            SPOTS.map((spot, index) => {
              if (spot.page !== page.pageIndex) return null;
              // Page coordinates become pixels only here, as the spot is drawn.
              const box = page.transform.pageToViewRect(spot.rect);
              return (
                <div
                  key={spot.label}
                  className="spot"
                  data-active={index === active}
                  style={{ left: box.x, top: box.y, width: box.width, height: box.height }}
                />
              );
            })
          }
        >
          {() => <RenderLayer />}
        </Stage>
      </DocumentGate>
    </Viewer>
  );
}

function SpotPicker({
  active,
  zoom,
  onActive,
  onZoom,
}: {
  active: number;
  zoom: RevealZoom;
  onActive: (index: number) => void;
  onZoom: (zoom: RevealZoom) => void;
}) {
  const stage = useStage();
  const pageCount = useStageState((state) => state.pageCount);

  const reveal = (index: number, revealZoom: RevealZoom) => {
    const spot = SPOTS[index];
    // The box lands about a third from the top, like a browser's find bar.
    stage.reveal(spot.page, { rect: spot.rect, zoom: revealZoom, anchor: { y: 0.35 } });
    onActive(index);
  };

  // Open on the first spot.
  useEffect(() => {
    stage.reveal(SPOTS[0].page, { rect: SPOTS[0].rect, zoom: 'fit-width', anchor: { y: 0.35 } });
  }, [stage]);

  return (
    <div className="toolbar">
      <div className="spots">
        {SPOTS.map((spot, index) => (
          <button
            key={spot.label}
            type="button"
            className="button"
            aria-pressed={index === active}
            disabled={spot.page >= pageCount}
            onClick={() => reveal(index, zoom)}
          >
            {spot.label}
          </button>
        ))}
      </div>
      <div className="segmented" role="group" aria-label="Zoom">
        {ZOOMS.map((option) => (
          <button
            key={option.label}
            type="button"
            aria-pressed={option.zoom === zoom}
            onClick={() => onZoom(option.zoom)}
          >
            {option.label}
          </button>
        ))}
      </div>
    </div>
  );
}

import { useEffect } from 'react';
import { Viewer, DocumentGate, usePageList } from '@embedpdf/react/runtime';
import type { OpenInput, PageDestination, PageInfo } from '@embedpdf/react/runtime';
import { Stage, stagePlugin, useStage, useStageState } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './destination.css';

const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

// Destinations as a link, a bookmark or the document's opening view give them.
const destinationsFor = (pages: readonly PageInfo[]) => {
  const pageAt = (index: number) => (pages[index] ?? pages[pages.length - 1]).ref;
  return [
    {
      label: 'xyz: page 3 at (72, 100), 200%',
      destination: { kind: 'xyz', page: pageAt(2), x: 72, y: 100, zoom: 2 },
    },
    { label: 'fit: all of page 2', destination: { kind: 'fit', page: pageAt(1) } },
    { label: 'fitH: page 1 from y = 300', destination: { kind: 'fitH', page: pageAt(0), y: 300 } },
    {
      label: 'fitR: a box on page 4',
      destination: { kind: 'fitR', page: pageAt(3), x: 72, y: 420, width: 260, height: 160 },
    },
  ] satisfies { label: string; destination: PageDestination }[];
};

function Destinations() {
  const stage = useStage();
  const pages = usePageList();
  const { zoomLevel, currentPageIndex } = useStageState();
  const destinations = destinationsFor(pages);

  // Open where the first destination points.
  useEffect(() => {
    if (pages.length > 0) stage.goToDestination(destinationsFor(pages)[0].destination);
  }, [stage, pages]);

  return (
    <div className="toolbar">
      {destinations.map(({ label, destination }) => (
        <button
          key={label}
          type="button"
          className="button"
          onClick={() => stage.goToDestination(destination)}
        >
          {label}
        </button>
      ))}
      <output className="badge">
        page <strong>{currentPageIndex + 1}</strong> ·{' '}
        <strong>{Math.round(zoomLevel * 100)}%</strong>
      </output>
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <Destinations />
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin, useStage, useStageSettings } from '@embedpdf/react/stage';
import type { StageSettings } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './presets.css';

const engine = localEngine();
// Zoomed in, so a page is wider than the view and you can see where it lands.
const plugins = [stagePlugin({ zoom: { level: 1.6 } }), renderPlugin()];

// A preset is an object you keep, and apply with updateSettings().
const READING: Partial<StageSettings> = {
  arrivalAlign: { x: 'start', y: 'start' },
  zoomAlign: { x: 'center', y: 'center' },
  anchorAlign: { x: 'start', y: 'start' },
};
const PRESENTATION: Partial<StageSettings> = {
  arrivalAlign: { x: 'center', y: 'center' },
  zoomAlign: { x: 'center', y: 'center' },
  anchorAlign: { x: 'center', y: 'center' },
};

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

function FeelSwitcher() {
  const stage = useStage();
  // The settings say which feel is on: pages land centered in a presentation.
  const presentation = useStageSettings((settings) => settings.arrivalAlign.y === 'center');

  return (
    <div className="toolbar">
      <div className="segmented" role="group" aria-label="Feel">
        <button
          type="button"
          aria-pressed={!presentation}
          onClick={() => stage.updateSettings(READING)}
        >
          Reading
        </button>
        <button
          type="button"
          aria-pressed={presentation}
          onClick={() => stage.updateSettings(PRESENTATION)}
        >
          Presentation
        </button>
      </div>
      <div className="pager">
        <button type="button" className="button" onClick={() => stage.previousPage()}>
          ‹ Previous
        </button>
        <button type="button" className="button" onClick={() => stage.nextPage()}>
          Next ›
        </button>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <FeelSwitcher />
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}

import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin, useStage, useStageState } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { localEngine } from '@embedpdf/engine';

import './rotate-view.css';

const engine = localEngine();
// The pages start a quarter turn round, like a scan that came out sideways.
const plugins = [stagePlugin({ viewRotation: 90 }), renderPlugin()];

const ebook = async (): Promise<OpenInput> => {
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};

function RotateButtons() {
  const stage = useStage();
  const viewRotation = useStageState((state) => state.viewRotation);

  return (
    <div className="toolbar">
      <button type="button" className="button" onClick={() => stage.rotateViewBy(-90)}>
        ⟲ Rotate left
      </button>
      <output className="readout">{viewRotation}°</output>
      <button type="button" className="button" onClick={() => stage.rotateViewBy(90)}>
        ⟳ Rotate right
      </button>
      <button
        type="button"
        className="button"
        disabled={viewRotation === 0}
        onClick={() => stage.setViewRotation(0)}
      >
        Upright
      </button>
    </div>
  );
}

export default function App() {
  return (
    <Viewer engine={engine} plugins={plugins} initialDocuments={[{ source: ebook }]}>
      <DocumentGate fallback={<p className="loading">Loading…</p>}>
        <RotateButtons />
        <Stage className="stage">{() => <RenderLayer />}</Stage>
      </DocumentGate>
    </Viewer>
  );
}