Skip to content

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.

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

// CPDFReaderView Sample
<CPDFReaderView
    ref={pdfReaderRef}
    document={samplePDF}
    saveDocument={saveDocument}
    configuration={config}/>

Display Mode

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

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

// CPDFReaderView Sample
<CPDFReaderView
    ref={pdfReaderRef}
    document={samplePDF}
    saveDocument={saveDocument}
    configuration={config}/>

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.

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

// CPDFReaderView Sample
<CPDFReaderView
    ref={pdfReaderRef}
    document={samplePDF}
    saveDocument={saveDocument}
    configuration={config}/>

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.

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

// CPDFReaderView Sample
<CPDFReaderView
    ref={pdfReaderRef}
    document={samplePDF}
    saveDocument={saveDocument}
    configuration={config}/>