React 360 PDF viewer
PDF viewer in VR space based on React 360 and PDF.js
Inspired by
- https://github.com/facebook/react-360/issues/392
- https://github.com/LiuC520/ReactVR/blob/master/examples/show_pdf_in_react360/RADEME.md
How to use (simple)
You can show your pdf with GitHub Pages by cloning this repository and replacing the docs/static_assets/demo.pdf
.
How to use (complex)
- Install this package
$ npm install -S react-360-pdf-viewer
- Import
PDF.js
at index.html
- Install
PdfModule
in clinet.js
;; { const r360 = bundle parent // Add custom options here fullScreen: true nativeModules: ctx ...options ;}
- Open document and render a page
;const PdfModule = NativeModules;const url = 'some.pdf'; PdfModule;
- Show the texture in render method
;; Component { return <PdfPlane width=720 height=540 texture="pdf_texture" loading=false /> ; }
Reference
Native Modules
PdfModule
-
PdfModule.getDocument(url) -> Promise({numPages})
- execute
pdfjsLib.getDocument(url)
and store the result
- execute
-
PdfModule.renderPage(pagenum, textureName) -> Promise()
- render page
pagenum
of stored document to a canvas and register it as a texture namedtextureName
- render page
React Components
PdfPlane
A React 360 component to show a rendered texture
- Properties
- width
- height
- texture: textureName to show
- loading: if true, hide the texture and print the text
loading
License
Copyright (c) 2018 Keisuke Minami
MIT