Unable to render PDF using DocumentWrapper component
Opened this issue · 1 comments
minump commented
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>
);
}
Any help is appreciated.
itsrun commented
Hi you should wrap this component around ContextProvider when using it (e.g., in App.js)