Mischief

24 / Documents

DOCX Viewer

Renders a Word document as elements built through an allowlist, so a file you did not write cannot bring its own scripts or links.

Live previewSource

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Contract({ file }: { file: File }) {
  return <DocxViewer source={file} />
}

API

sourceArrayBuffer | BlobThe document to convert.
resultDocxResultAlready converted html and messages. Skips the converter.
converter(source: ArrayBuffer) => Promise<DocxResult>Replaces the default converter. Supply this and mammoth is never loaded.
allowedTagsreadonly string[]The tags permitted in the output. Anything else keeps its text and loses its wrapper.
showWarningsbooleanLists conversion messages under the body.

Accessibility

Converted markup is never injected. The HTML is parsed and rebuilt as React elements through a tag and attribute allowlist, so event handler attributes cannot survive and a javascript: link loses its href while keeping its text. Links that do survive open in a new tab with noreferrer. The region reports aria-busy while a document is converting.

Dependencies

mammoth, lucide-react