# pdf-viewer-organize-pages

> PDF viewer organizes pages by reordering, rotating, and deleting them in a side panel.

**Framework:** react  **Component:** PdfViewer  **Variant:** organize-pages

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/ts/pdf-viewer-organize-pages.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-pdfviewer
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/pdf-viewer-organize-pages/PdfViewer.tsx

```tsx
/**
 * Default PDF Viewer sample
 */
import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
    ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer, Inject,
    type PageOrganizerSettingsModel
} from '@syncfusion/ej2-react-pdfviewer';

function Default() {
    let viewer: PdfViewerComponent;
    let isInitialLoading: boolean =  true;
    let pageOrganizerSettings: PageOrganizerSettingsModel = { showImageZoomingSlider: true };
    return (<div>
        <div className='control-section'>
            {/* Render the PDF Viewer */}
            <PdfViewerComponent ref={(scope) => { viewer = scope; }} id="container" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" resourceUrl = "https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib" documentLoad = {documentLoaded} style={{ 'height': '640px' }}
                pageOrganizerSettings={pageOrganizerSettings}>
                <Inject services={[Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]} />
            </PdfViewerComponent>
        </div>
    </div>
    );
    function documentLoaded() {
        if(isInitialLoading){
            viewer.isPageOrganizerOpen = true;
            isInitialLoading = false;
        }
        else{
            viewer.isPageOrganizerOpen = false;
        }
    }
}
export default Default;
```