Integrations

React integration

Install one package, import it, and mount the viewer. The render engine, its worker, and (for the framework wrappers) React all come bundled — nothing else to configure.

01 / Live preview

Open the full interactive demo →

This is the actual React app built from the code below, running live in an iframe.

02 / Install

npm install @trupdf/react react react-dom

03 / Example

import { useState, type CSSProperties } from 'react';
// Everything comes from the one package you install: @trupdf/react.
// The render engine, its self-contained worker, and react-dom are pulled in transitively —
// nothing else to install or configure. The viewer's own toolbar provides
// navigation, zoom, search, annotations, etc.; this header just opens a file.
import { DocViewer } from '@trupdf/react';
// Viewer chrome stylesheet (shipped by the bundled @trupdf/viewer).
import '@trupdf/viewer/styles.css';

const bar: CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  gap: 12,
  height: 48,
  padding: '0 16px',
  background: '#1a1a2e',
  color: '#fff',
  flexShrink: 0,
};
const brand: CSSProperties = { fontWeight: 700, letterSpacing: '0.04em', fontSize: '1.05rem' };
const tag: CSSProperties = { opacity: 0.55, fontWeight: 500, fontSize: '0.85rem', marginLeft: 6 };
const openBtn: CSSProperties = {
  position: 'relative',
  display: 'inline-flex',
  alignItems: 'center',
  height: 32,
  padding: '0 14px',
  borderRadius: 6,
  background: '#1976d2',
  color: '#fff',
  fontSize: '0.875rem',
  fontWeight: 500,
  cursor: 'pointer',
  border: '1px solid #1565c0',
};
const fileInput: CSSProperties = {
  position: 'absolute',
  inset: 0,
  width: '100%',
  height: '100%',
  opacity: 0,
  cursor: 'pointer',
};

export function App() {
  const [source, setSource] = useState<string | ArrayBuffer | null>('/sample.pdf');

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <header style={bar}>
        <span style={brand}>
          TruPDF<span style={tag}>React</span>
        </span>
        <label style={openBtn}>
          Open PDF
          <input
            type="file"
            accept="application/pdf"
            style={fileInput}
            onChange={(e) => {
              const file = e.target.files?.[0];
              if (file) void file.arrayBuffer().then(setSource);
            }}
          />
        </label>
      </header>

      <div style={{ flex: 1, minHeight: 0 }}>
        {source && <DocViewer source={source} theme="system" />}
      </div>
    </div>
  );
}