@cincel.digital/react v1.2.0

@cincel.digital/react

Installation

yarn add @cincel.digital/react

# or

npm i @cincel.digital/react

Usage

Basic

import * as React from "react"
import {
  PDFViewer,
  PdfViewer,
  PdfViewerCloseButton,
  PdfViewerContent,
  PdfViewerRenderer,
  PdfViewerToolbar,
} from "@cincel.digital/react"

const pv = new PDFViewer({ mode: "read" })
pv.debug = true

function IntegrationTest() {
  const [file, setFile] = React.useState<File | null>(null)

  const handleFileUpload = async (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    const file = event.target.files?.[0]
    if (!file) return

    setFile(file)
  }

  return (
    <PdfViewer
      pdfViewer={pv}
      file={file}
      url="https://dev.api.cincel.digital/v3/convert-to-pdf"
      onClose={() => setFile(null)}
      renderEmptyState={(state) => {
        if (state.loading) {
          return <pre>Converting to PDF...</pre>
        } else if (state.empty) {
          return (
            <div>
              <pre>Select a document to convert to PDF.</pre>
              <input
                type="file"
                title="Select a file"
                onChange={handleFileUpload}
              />
              {state.error && <pre>{JSON.stringify(state.error.message)}</pre>}
            </div>
          )
        }
      }}
    >
      <PdfViewerContent>
        <PdfViewerCloseButton />
        <PdfViewerToolbar />
        <PdfViewerRenderer />
      </PdfViewerContent>
    </PdfViewer>
  )
}

Customize the layout

The React integration is built upon an anatomy, which allows for composing the layout in any desired way. Custom styles can be passed to the Reactish, or grouped into multiple elements to achieve the desired effect/layout. For instance, to customize the toolbar, a render prop is provided, enabling the replacement of the render without complications.

<div className="flex space-x-4">
  <PdfViewerToolbar>
    {({ toolbar }) => (
      <div>
        <button onClick={toolbar.fullscreen}>fullscreen</button>
        <button onClick={toolbar.zoomIn}>Zoom in</button>
        <button onClick={toolbar.zoomOut}>Zoom out</button>
      </div>
    )}
  </PdfViewerToolbar>
  <PdfViewerToolbar>
    {({ toolbar }) => (
      <div>
        <button onClick={toolbar.text}>Free text</button>
        <button onClick={toolbar.signature}>Add signature</button>
      </div>
    )}
  </PdfViewerToolbar>
</div>

This is the value for the Toolbar:

Please note that the annotations(text, date & signature) will only be present if the Viewer was created in edit mode.

const pv = new PDFViewer({ mode: "edit" })

TODO

Get annotations Set annotations