wh-forge-viewer

A customized Autodesk Forge Viewer component for React with enhanced PDF support and custom toolbar.

Features

• ✅ Custom Toolbar - Pre-configured toolbar with Pan, Document Browser, Download, and Pagination controls
• ✅ PDF Support - Optimized for viewing PDF documents with page navigation
• ✅ Self-Healing - Automatic toolbar recovery mechanism ensures UI persistence
• ✅ 3D/2D Models - Full support for Autodesk Forge 3D and 2D models
• ✅ React Integration - Easy-to-use React component with hooks support

Installation

npm install wh-forge-viewer

Usage

import { ViewerForgePDF } from 'wh-forge-viewer';

function MyApp() {
  const [viewer, setViewer] = useState(null);

  return (
    <ViewerForgePDF
      filePath='https://example.com/document.pdf'
      fileExt='pdf'
      setViewer={setViewer}
    />
  );
}

Props

| Prop | Type | Required | Description | | ----------- | -------- | -------- | ------------------------------------- | | filePath | string | Yes | URL to the document to load | | fileExt | string | Yes | File extension (pdf, dwf, dwfx, etc.) | | setViewer | function | No | Callback to receive viewer instance |

Custom Toolbar

The viewer includes a custom toolbar with:

Tools Group

• Pan - Enable pan navigation
• Document Browser - Toggle document tree view
• Download - Download the current document

Pagination Group

• Previous Page - Navigate to previous page
• Page Counter - Display current page / total pages
• Next Page - Navigate to next page

Requirements

• React ^17.0.0 || ^18.0.0
• Ant Design ^5.0.0
• Autodesk Forge Viewer v7

Development

# Install dependencies
npm install

# Build package
npm run build

# Watch mode
npm run dev

Publishing

The package is automatically published to NPM when you push a version tag:

git tag v1.0.0
git push origin v1.0.0

License

MIT

Author

Duong Tran Quang

• Email: [email protected]
• GitHub: @DTDucas
• LinkedIn: dtducas

Issues

Report bugs and feature requests at GitHub Issues