ComPDFKit
Contact SalesGet Free Trial
PDF SDKIDPConversion SDK
PDF SDK
DownloadFAQTechnical Support

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}/>

You can also set the scroll direction via the API:

tsx
await pdfReaderRef.current?.setVerticalMode(true);

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}/>

Set the display mode via the API:

  • singlePage
tsx
await pdfReaderRef.current?.setDoublePageMode(false);
  • doublePage
tsx
await pdfReaderRef.current?.setDoublePageMode(true);
  • coverPage
tsx
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.

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

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

Set the scroll mode via the API:

tsx
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.

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

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

Set the crop mode via the API:

tsx
await pdfReaderRef.current?.setCropMode(true);