Add ref to DocViewer

[pitrudnicki]

Greetings! Is it possible to add references so that you can control the document yourself [e.g.: next/previous page, change zoom, etc...]?

I mean this code snippet

const docRef = useRef(null)
const nextPage = () => {
 if( docRef.current ) docRef.current.nextPage()
}
return (<>
<button onClick={nextPage}>next</button>
<DocViewer ref={docRef} />
</>)

[cyntler]

@pitrudnicki A good idea. It is not possible at the moment but sounds like a great idea to do. I marked it as a enhancement.

[cyntler]

@pitrudnicki Check it at the new version: https://github.com/cyntler/react-doc-viewer#using-docviewerref.

[RaflyLesmana3003]

i am using DocViewerRef, but its not working on react 16.13.1

const docViewerRef = useRef<DocViewerRef>(null);

   const docs = [
      { uri: fileUrl},
   ];

   useEffect(() => {
      console.log(docViewerRef)
   },[docViewerRef])
   return  (
   <>
      <div>
         <button onClick={() => docViewerRef?.current?.prev()}>
            Prev Document By Ref
         </button>
         <button onClick={() => docViewerRef?.current?.next()}>
            Next Document By Ref
         </button>
      </div>
      <DocViewer
         className={classes.removeHeader}
         ref={docViewerRef}
         documents={docs}
         config={{ header: { disableHeader: true } }}
      />
   </>
   );

[RaflyLesmana3003]

it work but not for pdf pagination but for documents switching? its that true?

[cyntler]

@RaflyLesmana3003 Yes! It is true.