Guides

Display Modes

Scroll Direction

The page scroll direction can be either horizontal or vertical.

If verticalMode is true, it indicates vertical scrolling; otherwise, it's horizontal scrolling.

let config = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    verticalMode: true
  }
});
ComPDFKit.openDocument(samplePDF, '', config);

// CPDFReaderView Sample
const pdfReaderRef = useRef<CPDFReaderView>(null);
<CPDFReaderView
    ref={pdfReaderRef}
    document={samplePDF}
    onSaveDocument={saveDocument}
    configuration={config}/>

You can also set the scroll direction via the API:

await pdfReaderRef.current?.setVerticalMode(true);

Display Mode

The page display mode can be SINGLE_PAGE, DOUBLE_PAGE, or COVER_PAGE.

let config = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    displayMode: CPDFDisplayMode.DOUBLE_PAGE
  }
});
ComPDFKit.openDocument(samplePDF, '', config);

// CPDFReaderView Sample
const pdfReaderRef = useRef<CPDFReaderView>(null);
<CPDFReaderView
    ref={pdfReaderRef}
    document={samplePDF}
    onSaveDocument={saveDocument}
    configuration={config}/>

Set the display mode via the API:

• singlePage

await pdfReaderRef.current?.setDoublePageMode(false);

• doublePage

await pdfReaderRef.current?.setDoublePageMode(true);

• coverPage

await pdfReaderRef.current?.setCoverPageMode(true);

Scrolling Mode

The scrolling mode can be set to continuous scrolling or page flipping mode. When continueMode is true, it represents continuous scrolling; otherwise, it's page flipping scrolling.

let config = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    continueMode: true
  }
});
ComPDFKit.openDocument(samplePDF, '', config);

// CPDFReaderView Sample
const pdfReaderRef = useRef<CPDFReaderView>(null);
<CPDFReaderView
    ref={pdfReaderRef}
    document={samplePDF}
    onSaveDocument={saveDocument}
    configuration={config}/>

Set the scroll mode via the API:

await pdfReaderRef.current?.setContinueMode(true);

Crop Mode

To display the document after cropping the blank areas around the PDF, when cropMode is true, it indicates enabling cropping mode; otherwise, it's not cropped.

let config = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    cropMode: true
  }
});
ComPDFKit.openDocument(samplePDF, '', config);

// CPDFReaderView Sample
const pdfReaderRef = useRef<CPDFReaderView>(null);
<CPDFReaderView
    ref={pdfReaderRef}
    document={samplePDF}
    onSaveDocument={saveDocument}
    configuration={config}/>

Set the crop mode via the API:

await pdfReaderRef.current?.setCropMode(true);