Scroll Mode plugin

The scroll-mode plugin provides buttons to adjust the scroll mode to one of three possible modes:

ModeTypeDescription
ScrollMode.VerticalScrollModeThe default scroll mode. Scroll the pages in the vertical direction
ScrollMode.HorizontalScrollModeScroll the pages in the horizontal direction
ScrollMode.WrappedScrollModeScroll the pages in both vertical and horizontal directions

ScrollMode is an enum provided by the scroll-mode plugin. You will know more about it in the next section.

Install

npm install '@react-pdf-viewer/scroll-mode';

Usage

  • Import the plugin and styles:
import { scrollModePlugin } from '@react-pdf-viewer/scroll-mode';

// Import styles
import '@react-pdf-viewer/scroll-mode/lib/styles/index.css';
  • Create the plugin instance:
const scrollModePluginInstance = scrollModePlugin(
    props?: ScrollModePluginProps
);

The optional parameter ScrollModePluginProps represents an object of the property:

?: Optional

PropertyTypeDescriptionFrom
scrollMode?ScrollModeThe initial scroll mode. By default, it is set to ScrollMode.Vertical2.0.0

The plugin instance scrollModePluginInstance provides the following properties:

PropertyTypeDescriptionFrom
SwitchScrollModeReactElementCustomizable button to switch the scroll mode2.0.0
SwitchScrollModeButtonReactElementThe default button to switch the scroll mode2.0.0
SwitchScrollModeMenuItemReactElementThe default menu item to switch the scroll mode2.0.0
  • Finally, register the scroll-mode plugin instance:
import { Viewer } from '@react-pdf-viewer/core';

// Your render function
<Viewer
    fileUrl='...'
    plugins={[
        scrollModePluginInstance,
    ]}
/>

Properties

The scroll-mode plugin provides other useful properties as following:

import {
    HorizontalScrollingIcon, VerticalScrollingIcon, WrappedScrollingIcon
} from '@react-pdf-viewer/scroll-mode';
PropertyTypeDescriptionFrom
HorizontalScrollingIconReactElementThe icon represents the horizontal scroll mode2.0.0
VerticalScrollingIconReactElementThe icon represents the vertical scroll mode2.0.0
WrappedScrollingIconReactElementThe icon represents the wrapped scroll mode2.0.0

Example: Use the default switching buttons

The SwitchScrollModeButton component accepts one prop named mode that represents the scroll mode.

// Switch to the vertical scroll mode
<SwitchScrollModeButton mode={ScrollMode.Vertical} />

// Switch to the horizontal scroll mode
<SwitchScrollModeButton mode={ScrollMode.Horizontal} />

// Switch to the wrapped scroll mode
<SwitchScrollModeButton mode={ScrollMode.Wrapped} />

The following example uses the default button to switch the scroll mode.

import { ScrollMode } from '@react-pdf-viewer/scroll-mode';

// Your render function
const scrollModePluginInstance = scrollModePlugin({
    scrollMode: ScrollMode.Horizontal,
});
const { SwitchScrollModeButton } = scrollModePluginInstance;

return (
    <div
        style={{
            border: '1px solid rgba(0, 0, 0, 0.3)',
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
        }}
    >
        <div
            style={{
                alignItems: 'center',
                backgroundColor: '#eeeeee',
                borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
                display: 'flex',
                padding: '4px',
            }}
        >
            <div style={{ padding: '0px 2px' }}>
                <SwitchScrollModeButton mode={ScrollMode.Vertical} />
            </div>
            <div style={{ padding: '0px 2px' }}>
                <SwitchScrollModeButton mode={ScrollMode.Horizontal} />
            </div>
            <div style={{ padding: '0px 2px' }}>
                <SwitchScrollModeButton mode={ScrollMode.Wrapped} />
            </div>
        </div>
        <div
            style={{
                flex: 1,
                overflow: 'hidden',
            }}
        >
            <Viewer
                fileUrl='/assets/pdf-open-parameters.pdf'
                plugins={[
                    scrollModePluginInstance,
                ]}
            />
        </div>
    </div>
);

In the following demo, if you choose the wrapped scroll mode, you should zoom the document out to 60% to see how the pages are wrapped.

(The sample code)

90%
bbcParameters for Opening PDF FilesAdobe® Acrobat® SDK April 2007Version 8.1
© 2007 Adobe Systems Incorporated. All rights reserved.Adobe® Acrobat® SDK 8.1 Parameters for Opening PDF Files for Microsoft® Windows®, Mac OS®, Linux®, and UNIX®Edition 1.0, April 2007If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.Any references to company names and company logos in sample material are for demonstration purposes only and are not intended to refer to any actual organization.Adobe, the Adobe logo, Acrobat and Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.Linux is a registered trademark of Linus Torvalds.Apple and Mac OS are trademarks of Apple Computer, Inc., registered in the United States and other countries.Microsoft and Windows are either a registered trademark or a trademark of Microsoft Corporation in the United States and/or other countries.UNIX is a registered trademark of The Open Group in the United States and other countries.All other trademarks are the property of their respective owners.Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users(a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, ifappropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.
3ContentsPreface .......................................................................................................................................... 4Who should read this guide? ..................................................................................................................................................... 4Related documentation ............................................................................................................................................................... 4Parameters for Opening PDF Files ............................................................................................. 5Parameters ........................................................................................................................................................................................ 5Specifying parameters in a URL ................................................................................................................................................ 7URL examples ............................................................................................................................................................................ 8URL limitations ..........................................................................................................................................................................8
4PrefaceThis document describes the parameters you can use when opening Adobe® PDF files. These parameters allow you to open a PDF file using a URL or command that specifies both the file to be opened and the actions to be performed once the file is opened. Who should read this guide?This guide is for developers who want to customize the way PDF files open. It may be useful for those developing an online collaboration system.Related documentationFor information aboutSeeConfiguring and administering a system for online collaborationusing comment repositories, Adobe Acrobat®, andAdobeReader®Acrobat Online Collaboration: Setup and AdministrationA detailed description of the PDF file formatPDF ReferenceDetailed descriptions of the APIs for Acrobat and AdobeReader plug-ins, as well as for PDF Library applicationsAcrobat and PDF Library API Reference
5Parameters for Opening PDF FilesYou can open a PDF document with a command or URL that specifies exactly what to display (a named destination or specific page), and how to display it (using such characteristics as a specific view, scrollbars, bookmarks, annotations, or highlighting).The parameters for URLs are supported by most browsers, and can be used when opening PDF documents programmatically.Many of these parameters can be passed to the following core API functions (see the Acrobat and PDF Library API Reference for details):AVDocOpenFromFileWithParamStringAVDocOpenFromASFileWithParamStringAVDocOpenFromPDDocWithParamStringWhen opening a PDF document from a command shell, you can pass the parameters to the open command using the /A switch with the following syntax:<Acrobat path> /A "<parameter>=<value>" "<PDF path>"For example:Acrobat.exe /A "zoom=1000" "C:\example.pdf"In Mac OS, you can use the parameters when opening a PDF document with an Apple event.Parameters The following table describes the parameters. Italics indicate user-specified variables.SyntaxDescriptionnameddest=destinationSpecifies a named destination in the PDF document.page=pagenumSpecifies a numbered page in the document, using an integer value. The document’s first page has a pagenum value of 1.comment=commentIDSpecifies a comment on a given page in the PDF document. Use the page command before this command. For example:#page=1&comment=452fde0e-fd22-457c-84aa-2cf5bed5a349
Adobe Acrobat SDKParameters for Opening PDF FilesParameters for Opening PDF Files Parameters 6collab=settingSets the comment repository to be used to supply and store comments for the document. This overrides the default comment server for the review or the default preference. The setting is of the form store_type@location, where valid values for store_type are:DAVFDF (WebDAV)FSFDF (Network folder)DB (ADBC)For example:#collab=DAVFDF@http://review_server/Collab/user1For more information on comment repositories, see Acrobat Online Collaboration: Setup and Administration.zoom=scalezoom=scale,left,topSets the zoom and scroll factors, using float or integer values. For example, a scale value of 100 indicates a zoom value of 100%.Scroll values left and top are in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.view=Fitview=FitHview=FitH,topview=FitVview=FitV,leftview=FitBview=FitBHview=FitBH,topview=FitBVview=FitBV,leftSet the view of the displayed page, using the keyword values defined in the PDF language specification. For more information, see the PDF Reference.Scroll values left and top are floats or integers in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.Use the page command before this command.Note:This parameter is not supported on the command line.viewrect=left,top,wd,htSets the view rectangle using float or integer values in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.Use the page command before this command.Note:This parameter is not supported on the command line.pagemode=bookmarkspagemode=thumbspagemode=none (default) Displays bookmarks or thumbnails.scrollbar=1|0Turns scrollbars on or off.SyntaxDescription
Adobe Acrobat SDKParameters for Opening PDF FilesParameters for Opening PDF Files Specifying parameters in a URL 7Specifying parameters in a URLYou can specify multiple parameters in a single URL. Separate each parameter with either an ampersand (&) or a pound (#) character. Actions are processed and executed from left to right as they appear in the URL. Because all specified actions are executed, it is possible that later actions will override the effects of previous actions, so it is important to use the correct order. For example, page actions should appear before zoom actions.Commands are not case sensitive except for the value of a named destination. There can be no spaces in the URL. search=wordListOpens the Search panel and performs a search for any of the words in the specified word list. The first matching word is highlighted in the document.The words must be enclosed in quotation marks and separated by spaces. For example:#search="word1 word2"You can search only for single words. You cannot search for a string of words.toolbar=1|0Turns the toolbar on or off.statusbar=1|0Turns the status bar on or off.messages=1|0Turns the document message bar on or off.navpanes=1|0Turns the navigation panes and tabs on or off.highlight=lt,rt,top,btmHighlights a specified rectangle on the displayed page. Use the page command before this command.The rectangle values are integers in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.fdf=URLSpecifies an FDF file to populate form fields in the PDF file being opened. For example:#fdf=http://example.org/doc.fdfNote:The fdf parameter should be specified last in a URL.SyntaxDescription
Adobe Acrobat SDKParameters for Opening PDF FilesParameters for Opening PDF Files URL examples 8URL exampleshttp://example.org/doc.pdf#Chapter6http://example.org/doc.pdf#page=3http://example.org/doc.pdf#page=3&zoom=200,250,100http://example.org/doc.pdf#zoom=50http://example.org/doc.pdf#page=72&view=fitH,100http://example.org/doc.pdf#pagemode=nonehttp://example.org/doc.pdf#pagemode=bookmarks&page=2http://example.org/doc.pdf#page=3&pagemode=thumbshttp://example.org/doc.pdf#collab=DAVFDF@http://review_server/Collab/user1http://example.org/doc.pdf#page=1&comment=452fde0e-fd22-457c-84aa-2cf5bed5a349http://example.org/doc.pdf#fdf=http://example.org/doc.fdfURL limitationsOnly one digit following a decimal point is retained for float values.Individual parameters, together with their values (separated by & or #), can be no greater then 32 characters in length.You cannot use the reserved characters =, #, and &. There is no way to escape these special characters.If you turn bookmarks off using a URL parameter when a document had previously been saved with bookmarks on, the bookmark scrollbars are displayed at first, and only disappear once Acrobat obtains enough streamed information to render the full page.

Example: Customize the switching buttons

The SwitchScrollMode component is used to create a custom switching button. It has two properties:

*: Required parameter

PropertyTypeDescriptionFrom
childrenRenderSwitchScrollModeProps => ReactElementThe render prop2.0.0
mode*ScrollModeThe scroll mode2.0.0

The sample code below creates a button that clicking it will switch to the horizontal scroll mode:

import { RenderSwitchScrollModeProps, ScrollMode } from '@react-pdf-viewer/scroll-mode';

// Your render function
const scrollModePluginInstance = scrollModePlugin();
const { SwitchScrollMode } = scrollModePluginInstance;

<SwitchScrollMode mode={ScrollMode.Horizontal}>
{
    (props: RenderSwitchScrollModeProps) => (
        <button
            style={{
                // Update the styles if the current mode is active
                backgroundColor: props.isSelected ? '#357edd' : 'transparent',
                borderColor: props.isSelected ? 'transparent' : '#357edd',
                color: props.isSelected ? '#fff' : '#000',
                
                borderRadius: '4px',
                borderStyle: 'solid',
                borderWidth: '1px',
                cursor: 'pointer',
                padding: '8px',
            }}
            onClick={props.onClick}
        >
            Horizontal scrolling
        </button>
    )
}
</SwitchScrollMode>

(The sample code)

90%
bbcParameters for Opening PDF FilesAdobe® Acrobat® SDK April 2007Version 8.1
© 2007 Adobe Systems Incorporated. All rights reserved.Adobe® Acrobat® SDK 8.1 Parameters for Opening PDF Files for Microsoft® Windows®, Mac OS®, Linux®, and UNIX®Edition 1.0, April 2007If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.Any references to company names and company logos in sample material are for demonstration purposes only and are not intended to refer to any actual organization.Adobe, the Adobe logo, Acrobat and Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.Linux is a registered trademark of Linus Torvalds.Apple and Mac OS are trademarks of Apple Computer, Inc., registered in the United States and other countries.Microsoft and Windows are either a registered trademark or a trademark of Microsoft Corporation in the United States and/or other countries.UNIX is a registered trademark of The Open Group in the United States and other countries.All other trademarks are the property of their respective owners.Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users(a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, ifappropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.
3ContentsPreface .......................................................................................................................................... 4Who should read this guide? ..................................................................................................................................................... 4Related documentation ............................................................................................................................................................... 4Parameters for Opening PDF Files ............................................................................................. 5Parameters ........................................................................................................................................................................................ 5Specifying parameters in a URL ................................................................................................................................................ 7URL examples ............................................................................................................................................................................ 8URL limitations ..........................................................................................................................................................................8
4PrefaceThis document describes the parameters you can use when opening Adobe® PDF files. These parameters allow you to open a PDF file using a URL or command that specifies both the file to be opened and the actions to be performed once the file is opened. Who should read this guide?This guide is for developers who want to customize the way PDF files open. It may be useful for those developing an online collaboration system.Related documentationFor information aboutSeeConfiguring and administering a system for online collaborationusing comment repositories, Adobe Acrobat®, andAdobeReader®Acrobat Online Collaboration: Setup and AdministrationA detailed description of the PDF file formatPDF ReferenceDetailed descriptions of the APIs for Acrobat and AdobeReader plug-ins, as well as for PDF Library applicationsAcrobat and PDF Library API Reference
5Parameters for Opening PDF FilesYou can open a PDF document with a command or URL that specifies exactly what to display (a named destination or specific page), and how to display it (using such characteristics as a specific view, scrollbars, bookmarks, annotations, or highlighting).The parameters for URLs are supported by most browsers, and can be used when opening PDF documents programmatically.Many of these parameters can be passed to the following core API functions (see the Acrobat and PDF Library API Reference for details):AVDocOpenFromFileWithParamStringAVDocOpenFromASFileWithParamStringAVDocOpenFromPDDocWithParamStringWhen opening a PDF document from a command shell, you can pass the parameters to the open command using the /A switch with the following syntax:<Acrobat path> /A "<parameter>=<value>" "<PDF path>"For example:Acrobat.exe /A "zoom=1000" "C:\example.pdf"In Mac OS, you can use the parameters when opening a PDF document with an Apple event.Parameters The following table describes the parameters. Italics indicate user-specified variables.SyntaxDescriptionnameddest=destinationSpecifies a named destination in the PDF document.page=pagenumSpecifies a numbered page in the document, using an integer value. The document’s first page has a pagenum value of 1.comment=commentIDSpecifies a comment on a given page in the PDF document. Use the page command before this command. For example:#page=1&comment=452fde0e-fd22-457c-84aa-2cf5bed5a349
Adobe Acrobat SDKParameters for Opening PDF FilesParameters for Opening PDF Files Parameters 6collab=settingSets the comment repository to be used to supply and store comments for the document. This overrides the default comment server for the review or the default preference. The setting is of the form store_type@location, where valid values for store_type are:DAVFDF (WebDAV)FSFDF (Network folder)DB (ADBC)For example:#collab=DAVFDF@http://review_server/Collab/user1For more information on comment repositories, see Acrobat Online Collaboration: Setup and Administration.zoom=scalezoom=scale,left,topSets the zoom and scroll factors, using float or integer values. For example, a scale value of 100 indicates a zoom value of 100%.Scroll values left and top are in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.view=Fitview=FitHview=FitH,topview=FitVview=FitV,leftview=FitBview=FitBHview=FitBH,topview=FitBVview=FitBV,leftSet the view of the displayed page, using the keyword values defined in the PDF language specification. For more information, see the PDF Reference.Scroll values left and top are floats or integers in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.Use the page command before this command.Note:This parameter is not supported on the command line.viewrect=left,top,wd,htSets the view rectangle using float or integer values in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.Use the page command before this command.Note:This parameter is not supported on the command line.pagemode=bookmarkspagemode=thumbspagemode=none (default) Displays bookmarks or thumbnails.scrollbar=1|0Turns scrollbars on or off.SyntaxDescription
Adobe Acrobat SDKParameters for Opening PDF FilesParameters for Opening PDF Files Specifying parameters in a URL 7Specifying parameters in a URLYou can specify multiple parameters in a single URL. Separate each parameter with either an ampersand (&) or a pound (#) character. Actions are processed and executed from left to right as they appear in the URL. Because all specified actions are executed, it is possible that later actions will override the effects of previous actions, so it is important to use the correct order. For example, page actions should appear before zoom actions.Commands are not case sensitive except for the value of a named destination. There can be no spaces in the URL. search=wordListOpens the Search panel and performs a search for any of the words in the specified word list. The first matching word is highlighted in the document.The words must be enclosed in quotation marks and separated by spaces. For example:#search="word1 word2"You can search only for single words. You cannot search for a string of words.toolbar=1|0Turns the toolbar on or off.statusbar=1|0Turns the status bar on or off.messages=1|0Turns the document message bar on or off.navpanes=1|0Turns the navigation panes and tabs on or off.highlight=lt,rt,top,btmHighlights a specified rectangle on the displayed page. Use the page command before this command.The rectangle values are integers in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.fdf=URLSpecifies an FDF file to populate form fields in the PDF file being opened. For example:#fdf=http://example.org/doc.fdfNote:The fdf parameter should be specified last in a URL.SyntaxDescription
Adobe Acrobat SDKParameters for Opening PDF FilesParameters for Opening PDF Files URL examples 8URL exampleshttp://example.org/doc.pdf#Chapter6http://example.org/doc.pdf#page=3http://example.org/doc.pdf#page=3&zoom=200,250,100http://example.org/doc.pdf#zoom=50http://example.org/doc.pdf#page=72&view=fitH,100http://example.org/doc.pdf#pagemode=nonehttp://example.org/doc.pdf#pagemode=bookmarks&page=2http://example.org/doc.pdf#page=3&pagemode=thumbshttp://example.org/doc.pdf#collab=DAVFDF@http://review_server/Collab/user1http://example.org/doc.pdf#page=1&comment=452fde0e-fd22-457c-84aa-2cf5bed5a349http://example.org/doc.pdf#fdf=http://example.org/doc.fdfURL limitationsOnly one digit following a decimal point is retained for float values.Individual parameters, together with their values (separated by & or #), can be no greater then 32 characters in length.You cannot use the reserved characters =, #, and &. There is no way to escape these special characters.If you turn bookmarks off using a URL parameter when a document had previously been saved with bookmarks on, the bookmark scrollbars are displayed at first, and only disappear once Acrobat obtains enough streamed information to render the full page.