Make it easier to display all pages

[wojtekmaj]

Before you start - checklist

• I understand that React-PDF does not aim to be a fully-fledged PDF viewer and is only a tool to make one
• I have checked if this feature request is not already reported

Is your feature request related to a problem? Please describe.

It should be easy to display all PDF pages at once, as suggested in #98.

Describe the solution you'd like

<AllPages /> component? Better documentation? Optional render props that allows to iterate through all pages?

[qaisershehzad]

Hello @wojtekmaj , Any chance with this component to display all pages ?

thanks.

[wojtekmaj]

@qaisershehzad Not right now. Busy in private life, and with budget of $0 I need to prioritize to make a living :)

[wojtekmaj]

After consideration I've decided not to put this AllPages component into core React-PDF. Here's why:

Including well built, performant AllPages component would require building a solution using third party tools like React-Window. This would likely cause developers to use AllPages instead of whatever solutions they are already using for lazy loading components. Building AllPages component that would work well with React-Window and other similar libraries would be super hard, if not impossible to do.

I'll be more than happy to see React-PDF based extensions, which use react-pdf API to provide additional functionalities.

Here's <AllPages /> implementation, without any external libraries which would delay loading pages until it's needed, that you can base your work on:

import React, { PureComponent } from 'react';

import DocumentContext from 'react-pdf/dist/DocumentContext';
import { PageInternal } from 'react-pdf/dist/Page';

export class AllPagesInternal extends PureComponent {
  componentDidMount() {
    const { pdf } = this.props;

    if (!pdf) {
      throw new Error('Attempted to load a page, but no document was specified.');
    }
  }

  render() {
    const { pdf } = this.props;

    const { numPages } = pdf;

    return (
      Array.from(
        new Array(numPages),
        (el, index) => (
          <PageInternal
            {...this.props}
            key={`page_${index + 1}`}
            pageNumber={index + 1}
          />
        ),
      )
    );
  }
}


const { pageIndex, pageNumber, ...allPagesInternalPropTypes } = PageInternal.propTypes;

AllPagesInternal.propTypes = {
  ...allPagesInternalPropTypes,
};

const AllPages = props => (
  <DocumentContext.Consumer>
    {context => (
      <AllPagesInternal
        {...context}
        {...props}
        // For backwards compatibility
        renderAnnotationLayer={
          typeof props.renderAnnotationLayer !== 'undefined'
            ? props.renderAnnotationLayer
            : props.renderAnnotations
        }
      />
    )}
  </DocumentContext.Consumer>
);

export default AllPages;

As you can see, render function is just an array based on numPages, which we then map on. This makes it rather easy to make it work with React-Window or React-Virtualized.

[amyhuangxbd]

I think AllPages is quite necessary, many other file like ppt,excel can be transffed to be pdf, they should be display multi pages.

[ashnakumar]

After consideration I've decided not to put this AllPages component into core React-PDF. Here's why:

Including well built, performant AllPages component would require building a solution using third party tools like React-Window. This would likely cause developers to use AllPages instead of whatever solutions they are already using for lazy loading components. Building AllPages component that would work well with React-Window and other similar libraries would be super hard, if not impossible to do.

I'll be more than happy to see React-PDF based extensions, which use react-pdf API to provide additional functionalities.

Here's <AllPages /> implementation, without any external libraries which would delay loading pages until it's needed, that you can base your work on:

import React, { PureComponent } from 'react';

import DocumentContext from 'react-pdf/dist/DocumentContext';
import { PageInternal } from 'react-pdf/dist/Page';

export class AllPagesInternal extends PureComponent {
  componentDidMount() {
    const { pdf } = this.props;

    if (!pdf) {
      throw new Error('Attempted to load a page, but no document was specified.');
    }
  }

  render() {
    const { pdf } = this.props;

    const { numPages } = pdf;

    return (
      Array.from(
        new Array(numPages),
        (el, index) => (
          <PageInternal
            {...this.props}
            key={`page_${index + 1}`}
            pageNumber={index + 1}
          />
        ),
      )
    );
  }
}


const { pageIndex, pageNumber, ...allPagesInternalPropTypes } = PageInternal.propTypes;

AllPagesInternal.propTypes = {
  ...allPagesInternalPropTypes,
};

const AllPages = props => (
  <DocumentContext.Consumer>
    {context => (
      <AllPagesInternal
        {...context}
        {...props}
        // For backwards compatibility
        renderAnnotationLayer={
          typeof props.renderAnnotationLayer !== 'undefined'
            ? props.renderAnnotationLayer
            : props.renderAnnotations
        }
      />
    )}
  </DocumentContext.Consumer>
);

export default AllPages;

As you can see, render function is just an array based on numPages, which we then map on. This makes it rather easy to make it work with React-Window or React-Virtualized.

How to link pdf file? It is throwing an Error: Attempted to load a page, but no document was specified.

[wojtekmaj]

@ashnakumar Looks like you may have not wrapped your AllPages component in Document component.

[ashnakumar]

I didnt understand

@ashnakumar Looks like you may have not wrapped your AllPages component in Document component.

[biennui1998mu]

import {FixedSizeList as List} from 'react-window'

import DocumentContext from 'react-pdf/dist/esm/DocumentContext';
import { PageInternal } from 'react-pdf/dist/esm/Page';

export class AllPagesInternal extends PureComponent {
    componentDidMount() {
        console.log("sonnn", this.props);
        const { pdf } = this.props;

        if (!pdf) {
            throw new Error('Attempted to load a page, but no document was specified.');
        }
    }

    render() {
        const { pdf } = this.props;

        const { numPages } = pdf;

        const Row = ({index, style}) => {
            return (
                <PageInternal
                    {...this.props}
                    key={`page_${index + 1}`}
                    pageNumber={index + 1}
                />
            )
        };
        
        return (
            <List
                itemCount={numPages}
                itemSize={this.props.height}
                width={this.props.width}
                height={this.props.height * numPages}
            >
                {Row}
            </List>
        );
    }
}


const { pageIndex, pageNumber, ...allPagesInternalPropTypes } = PageInternal.propTypes;

AllPagesInternal.propTypes = {
    ...allPagesInternalPropTypes,
};

const AllPages = props => (
    <DocumentContext.Consumer>
        {context => (
            <AllPagesInternal
                {...context}
                {...props}
                // For backwards compatibility
                renderAnnotationLayer={
                    typeof props.renderAnnotationLayer !== 'undefined'
                        ? props.renderAnnotationLayer
                        : props.renderAnnotations
                }
            />
        )}
    </DocumentContext.Consumer>
);

export default AllPages;

I tried AllPages with react-window but my console log in componentDidMount was infinity re-render. Can you demo an example of how to use AllPages with react-window or react-virtualize or check where is code wrong? @wojtekmaj