Page Navigation plugin

The page-navigation plugin provides a few components to navigate between pages.

Install

npm install '@react-pdf-viewer/page-navigation';

Usage

  • Import the plugin and styles:
import { pageNavigationPlugin } from '@react-pdf-viewer/page-navigation';

// Import styles
import '@react-pdf-viewer/page-navigation/lib/styles/index.css';
  • Create the plugin instance:
const pageNavigationPluginInstance = pageNavigationPlugin();

The plugin instance pageNavigationPluginInstance provides the following properties:

PropertyTypeDescriptionFrom
CurrentPageInputReactElementAllow to jump to any page2.0.0
CurrentPageLabelReactElementDisplay the current page number2.0.0
GoToFirstPageReactElementCustomizable button to jump to the first page2.0.0
GoToFirstPageButtonReactElementThe button to jump to the first page2.0.0
GoToFirstPageMenuItemReactElementThe menu item to jump to the first page2.0.0
GoToLastPageReactElementCustomizable button to jump to the last page2.0.0
GoToLastPageButtonReactElementThe button to jump to the last page2.0.0
GoToLastPageMenuItemReactElementThe menu item to jump to the last page2.0.0
GoToNextPageReactElementCustomizable button to jump to the next page2.0.0
GoToNextPageButtonReactElementThe button to jump to the next page2.0.0
GoToPreviousPageReactElementCustomizable button to jump to the previous page2.0.0
GoToPreviousPageButtonReactElementThe button to jump to the previous page2.0.0

See their usages in the examples below.

  • Finally, register the page-navigation plugin instance:
import { Viewer } from '@react-pdf-viewer/core';

<Viewer
    fileUrl='...'
    plugins={[
        pageNavigationPluginInstance,
    ]}
/>

Properties

The page-navigation plugin provides other useful properties as following:

import { DownArrowIcon, NextIcon, PreviousIcon, UpArrowIcon } from '@react-pdf-viewer/page-navigation';
PropertyTypeDescriptionFrom
DownArrowIconReactElementCan be used with going to the first page component2.0.0
NextIconReactElementCan be used with going to the next page component2.0.0
PreviousIconReactElementCan be used with going to the previous page component2.0.0
UpArrowIconReactElementCan be used with going to the last page component2.0.0

Example: Display the current page

We can use the CurrentPageLabel component to display the current page.

const pageNavigationPluginInstance = pageNavigationPlugin();
const { CurrentPageLabel } = pageNavigationPluginInstance;

It has a render prop hich is a function accepting RenderCurrentPageLabelProps parameter and returns a React element. RenderCurrentPageLabelProps consists of the following properties:

PropertyTypeDescriptionFrom
currentPagenumberThe current page number2.0.0
numberOfPagesnumberThe total number of pages2.0.0

Here is an example showing the current page number at the top:

import { RenderCurrentPageLabelProps } from '@react-pdf-viewer/page-navigation';

// Your render function
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',
                justifyContent: 'center',
                padding: '8px',
            }}
        >
            <CurrentPageLabel>
            {
                (props: RenderCurrentPageLabelProps) => (
                    <span>{`${props.currentPage + 1} of ${props.numberOfPages}`}</span>
                )
            }
            </CurrentPageLabel>
        </div>
        <div
            style={{
                flex: 1,
                overflow: 'hidden',
            }}
        >
            <Viewer
                fileUrl='/assets/pdf-open-parameters.pdf'
                plugins={[
                    pageNavigationPluginInstance,
                ]}
            />
        </div>
    </div>
);

In the example below, you can scroll up or down to see the current page is updated.

(The sample code)

1 of 8
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

Example: Use the default navigations buttons

The following example uses the default buttons for jumping to first, previous, next and last pages of the document.

// Your render function
const pageNavigationPluginInstance = pageNavigationPlugin();

const { 
    CurrentPageInput,
    GoToFirstPageButton, GoToLastPageButton,
    GoToNextPageButton, GoToPreviousPage
} = pageNavigationPluginInstance;

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',
                justifyContent: 'center',
                padding: '4px',
            }}
        >
            <div style={{ padding: '0px 2px' }}>
                <GoToFirstPageButton />
            </div>
            <div style={{ padding: '0px 2px' }}>
                <GoToPreviousPage />
            </div>
            <div style={{ padding: '0px 2px' }}>
                <CurrentPageInput />
            </div>
            <div style={{ padding: '0px 2px' }}>
                <GoToNextPageButton />
            </div>
            <div style={{ padding: '0px 2px' }}>
                <GoToLastPageButton />
            </div>
        </div>
        <div
            style={{
                flex: 1,
                overflow: 'hidden',
            }}
        >
            <Viewer
                fileUrl='/assets/pdf-open-parameters.pdf'
                plugins={[
                    pageNavigationPluginInstance,
                ]}
            />
        </div>
    </div>
);

(The sample code)

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

Example: Customize the navigation buttons

We can create custom navigation buttons with the GoToFirstPage, GoToLastPage, GoToNextPage and GoToPreviousPage components. They can be accessed directly from the page-navigation plugin instance:

const pageNavigationPluginInstance = pageNavigationPlugin();
const {
    GoToFirstPage, GoToLastPage, GoToNextPage, GoToPreviousPage
} = pageNavigationPluginInstance;

Customize the button of jumping to the first page

The GoToFirstPage component has a render prop which is a function accepting a RenderGoToFirstPageProps parameter and returns a React element.

import { RenderGoToFirstPageProps } from '@react-pdf-viewer/page-navigation';

// Your render function
<GoToFirstPage>
{
    (props: RenderGoToFirstPageProps) => (
        <button
            style={{
                ...
            }}
            onClick={props.onClick}
        >
            First page
        </button>
    )
}
</GoToFirstPage>

Customize the button of jumping to the previous page

The GoToPreviousPage component has a render prop that accepts a RenderGoToPreviousPageProps parameter and returns a React element.

import { RenderGoToPreviousPageProps } from '@react-pdf-viewer/page-navigation';

// Your render function
<GoToPreviousPage>
{
    (props: RenderGoToFirstPageProps) => (
        <button
            style={{
                ...
            }}
            // It will be disabled if the current page is the first page
            disabled={props.isDisabled}
            onClick={props.onClick}
        >
            Previous page
        </button>
    )
}
</GoToPreviousPage>

Customize the button of jumping to the next page

The GoToNextPage component has a render prop that accepts a RenderGoToNextPageProps parameter and returns a React element.

import { RenderGoToNextPageProps } from '@react-pdf-viewer/page-navigation';

// Your render function
<GoToNextPage>
{
    (props: RenderGoToNextPageProps) => (
        <button
            style={{
                ...
            }}
            // It will be disabled if we are already at the last page
            disabled={props.isDisabled}
            onClick={props.onClick}
        >
            Next page
        </button>
    )
}
</GoToNextPage>

Customize the button of jumping to the last page

The GoToLastPage component has a render prop that accepts a RenderGoToLastPageProps parameter and returns a React element.

import { RenderGoToLastPageProps } from '@react-pdf-viewer/page-navigation';

// Your render function
<GoToLastPage>
{
    (props: RenderGoToLastPageProps) => (
        <button
            style={{
                ...
            }}
            onClick={props.onClick}
        >
            Last page
        </button>
    )
}
</GoToLastPage>

(The sample code)

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