allenai / pdf-component-library

51 stars 5 forks source link

Unable to render PDF using DocumentWrapper component #207

Open minump opened 11 months ago

minump commented 11 months ago

Installed AllenAI pdf-component-library using npm install @allenai/pdf-components . Used the code from Reader component. Unable to render Pdf documents. Errors : Unable to call method(). The context Provider may not be setup correctly.. Screenshot of console log below.

Relevant code snippets below :

package.json:

"dependencies": {
        "@allenai/pdf-components": "^1.0.1",

src/components/Pdf.js:

import React, { useEffect, useRef, useState } from "react";
import {
    DocumentContext,
    DocumentWrapper,
    Overlay,
    PageWrapper,
    RENDER_TYPE,
    ScrollContext,
} from '@allenai/pdf-components';

export default function Pdf(props) {
    const { pageDimensions, numPages } = React.useContext(DocumentContext);
    const { setScrollRoot } = React.useContext(ScrollContext);

    React.useEffect(() => {
        setScrollRoot(null);
    }, []);

    // ref for the div in which the Document component renders
    const pdfContentRef = React.createRef();

    // ref for the scrollable region where the pages are rendered
    const pdfScrollableRef = React.createRef();

    const samplePdfUrl = 'https://arxiv.org/pdf/2112.07873.pdf';

    return (
        <div>
            <div className="reader__container">
                <DocumentWrapper
                    className="reader__main"
                    file={samplePdfUrl}
                    inputRef={pdfContentRef}
                    renderType={RENDER_TYPE.SINGLE_CANVAS}>
                    <div className="reader__page-list" ref={pdfScrollableRef}>
                        {Array.from({ length: numPages }).map((_, i) => (
                            <PageWrapper key={i} pageIndex={i} renderType={RENDER_TYPE.SINGLE_CANVAS}>

                            </PageWrapper>
                        ))}
                    </div>
                </DocumentWrapper>
            </div>
        </div>
    );
}

Screenshot 2023-11-27 at 10 46 05 AM

Any help is appreciated.

itsrun commented 3 months ago

Hi you should wrap this component around ContextProvider when using it (e.g., in App.js)