@indora-labs/redaction-react

A React component library for rendering and reviewing redactions in text, audio, and video files. Provides headless, prop-driven UI components designed to embed cleanly into regulated data workflows and custom applications.

======================================

Installation

======================================

npm install @indora-labs/redaction-react

or

yarn add @indora-labs/redaction-react

Lastest install

npm install @indora-labs/redaction-react@latest

Basic Usage

import { PdfRedactionViewer } from "@indora-labs/redaction-react";

<PdfRedactionViewer
  pdfUrl="https://example.com/document.pdf"
  rects={[]}
  onRectsChange={(rects) => console.log(rects)}
  allowCreate
  allowEdit
/>

Required Props

Prop Type Description pdfUrl string Public or presigned URL to a PDF rects Rect[] Current redaction rectangles onRectsChange (rects: Rect[]) => void Called when rectangles change

Optional Props

Prop Description allowCreate Allow creating new redactions allowEdit Allow resizing/moving redactions allowFreeformDragCreate Allow drag-to-create without OCR zoom Viewer zoom level pageFilter Restrict which pages are selectable onRectSelect Callback when a rect is selected

======================================

How PDF Loading Works (Important)

======================================

• Consumers pass only a URL

• The component:

  • fetches the PDF internally
  • converts it to binary
  • renders using pdfjs-dist v5

• A real pdf.js worker is bundled inside this package

• No worker configuration is required by consumers

This design avoids:

• CORS issues
• GovCloud S3 edge cases
• bundler-specific worker config
• leaking pdf.js internals

======================================

Local Development

======================================

npm install
npm run dev

This runs tsup in watch mode.

Building the Package

npm run build

This produces:

dist/
  index.js      (CJS)
  index.mjs     (ESM)
  index.d.ts    (types)

======================================

Versioning

====================================== This project uses semantic versioning.

Patch release (bug fixes)

npm version patch

Minor release (new features, backward compatible)

npm version minor

Major release (breaking changes)

npm version major

npm version automatically:

• bumps package.json
• creates a git tag
• commits the change

======================================

Publishing to npm

======================================

One-time setup

npm login

Verify:

npm whoami

Publish (public package)

npm publish --access public

prepublishOnly automatically runs the build before publishing.

======================================

Updating the Package

====================================== Typical flow:

# Make code changes
npm run build

# Bump version
npm version patch

# Publish
npm publish --access public

======================================

Consuming App Requirements

====================================== This package works out-of-the-box with:

• Vite
• Webpack 5+
• Next.js
• Remix

No special configuration required.

======================================

Common Pitfalls

====================================== ❌ Do not try to disable pdf.js workers pdf.js v5 requires a real worker module.

❌ Do not import the worker in consuming apps The worker is bundled internally.

❌ Do not use pdfjs.getDocument({ url }) The library fetches PDFs internally for reliability.

======================================

License

====================================== UNLICENSED (Internal / Controlled Distribution)

======================================

Support

====================================== For issues or integration questions, contact the Indora Labs team.