React App

commit 898f30ebe369be1983513a675a4e7716baf1876c Author: Vitalik Date: Thu Jan 19 12:12:21 2023 +0200 Init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..eaf77f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.eslintcache +node_modules +package-lock.json \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..2a8b58f --- /dev/null +++ b/README.md @@ -0,0 +1,50 @@ +This folder demonstrates how to use [React PDF viewer](https://react-pdf-viewer.dev) with [Create React App](https://github.com/facebook/create-react-app). + +## Install + +* Install the dependencies + +```console +$ npm install +``` + +* Build + +```console +$ npm run build +``` + +* Run locally + +```console +$ npm run start +``` + +Visit http://localhost:3000 to see it in action. + +## Spotlights + +[App.js](src/App.js): + +``` javascript +import { Viewer, Worker } from '@react-pdf-viewer/core'; +import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; + +import '@react-pdf-viewer/core/lib/styles/index.css'; +import '@react-pdf-viewer/default-layout/lib/styles/index.css'; + +const defaultLayoutPluginInstance = defaultLayoutPlugin(); + +return ( + +

+ +

+ +); +``` diff --git a/package.json b/package.json new file mode 100644 index 0000000..45ff02e --- /dev/null +++ b/package.json @@ -0,0 +1,34 @@ +{ + "name": "react-pdf-viewer-create-react-app", + "private": true, + "version": "0.0.0", + "dependencies": { + "@react-pdf-viewer/core": "3.6.0", + "@react-pdf-viewer/default-layout": "3.6.0", + "pdfjs-dist": "^2.15.349", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^6.7.0", + "react-scripts": "^5.0.1" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..bcd5dfd Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..aa069f2 --- /dev/null +++ b/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +

+ + + diff --git a/public/logo192.png b/public/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/public/logo512.png differ diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..f01493f --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/public/pdf-open-parameters.pdf b/public/pdf-open-parameters.pdf new file mode 100644 index 0000000..4a547d9 Binary files /dev/null and b/public/pdf-open-parameters.pdf differ diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..3bc6e35 --- /dev/null +++ b/src/App.js @@ -0,0 +1,33 @@ +import * as React from "react"; +import { Viewer, Worker } from "@react-pdf-viewer/core"; +import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout"; + +import "@react-pdf-viewer/core/lib/styles/index.css"; +import "@react-pdf-viewer/default-layout/lib/styles/index.css"; +import { useLocation, useSearchParams } from "react-router-dom"; + +const App = () => { + const defaultLayoutPluginInstance = defaultLayoutPlugin(); + const [searchParams, setSearchParams] = useSearchParams(); + if (!searchParams.get("url")) return null; + + return ( + +

+ +

+ + ); +}; + +export default App; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..b232c84 --- /dev/null +++ b/src/index.css @@ -0,0 +1,11 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', + 'Droid Sans', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..899548f --- /dev/null +++ b/src/index.js @@ -0,0 +1,21 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import * as serviceWorker from "./serviceWorker"; +import { BrowserRouter } from "react-router-dom"; + +ReactDOM.render( + + + + + , + , + document.getElementById("root") +); + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: https://bit.ly/CRA-PWA +serviceWorker.unregister(); diff --git a/src/serviceWorker.js b/src/serviceWorker.js new file mode 100644 index 0000000..3d23baf --- /dev/null +++ b/src/serviceWorker.js @@ -0,0 +1,134 @@ +// This optional code is used to register a service worker. +// register() is not called by default. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on subsequent visits to a page, after all the +// existing tabs open on the page have been closed, since previously cached +// resources are updated in the background. + +// To learn more about the benefits of this model and instructions on how to +// opt-in, read https://bit.ly/CRA-PWA + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.0/8 are considered localhost for IPv4. + window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) +); + +export function register(config) { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://bit.ly/CRA-PWA' + ); + }); + } else { + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); + } + }); + } +} + +function registerValidSW(swUrl, config) { + navigator.serviceWorker + .register(swUrl) + .then((registration) => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + if (installingWorker == null) { + return; + } + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + 'New content is available and will be used when all ' + + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' + ); + + // Execute callback + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + + // Execute callback + if (config && config.onSuccess) { + config.onSuccess(registration); + } + } + } + }; + }; + }) + .catch((error) => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl, config) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl, { + headers: { 'Service-Worker': 'script' }, + }) + .then((response) => { + // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get('content-type'); + if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then((registration) => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl, config); + } + }) + .catch(() => { + console.log('No internet connection found. App is running in offline mode.'); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready + .then((registration) => { + registration.unregister(); + }) + .catch((error) => { + console.error(error.message); + }); + } +}