Add demo app navigation

src/demoapp/DemoApp.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Link, Navigate } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import DocViewerApp from "./demos/DocViewerApp";
+import DocViewerWithInputApp from "./demos/DocViewerWithInputApp";
+
+const App = () => (
+ <BrowserRouter>
+ <h1>@cyntler/react-doc-viewer</h1>
+ <main>
+ <nav className="demo-app-nav">
+ <ul>
+ <li>
+ <Link to="/doc-viewer">Default</Link>
+ </li>
+ <li>
+ <Link to="/doc-viewer-with-input">With Input</Link>
+ </li>
+ </ul>
+ </nav>
+ <div className="demo-app-wrapper">
+ <Routes>
+ <Route path="/doc-viewer" element={<DocViewerApp />} />
+ <Route
+ path="/doc-viewer-with-input"
+ element={<DocViewerWithInputApp />}
+ />
+ <Route path="*" element={<Navigate to="/doc-viewer" replace />} />
+ </Routes>
+ </div>
+ </main>
+ </BrowserRouter>
+);
+
+export default App;

src/demoapp/DocViewerApp.tsx → src/demoapp/demos/DocViewerApp.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import DocViewer from "../index";
-import { DocViewerRenderers } from "../plugins";
+import DocViewer from "../../index";
+import { DocViewerRenderers } from "../../plugins";
 
 const DocViewerApp = () => {
  const docs = [
- { uri: require("./exampleFiles/pdf-file.pdf") },
- { uri: require("./exampleFiles/png-image.png") },
- { uri: require("./exampleFiles/csv-file.csv") },
+ { uri: require("../exampleFiles/pdf-file.pdf") },
+ { uri: require("../exampleFiles/png-image.png") },
+ { uri: require("../exampleFiles/csv-file.csv") },
  ];
 
  return (

src/demoapp/DocViewerWithInputApp.tsx → src/demoapp/demos/DocViewerWithInputApp.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import DocViewer from "../index";
-import { DocViewerRenderers } from "../plugins";
+import DocViewer from "../../index";
+import { DocViewerRenderers } from "../../plugins";
 
 const DocViewerWithInputApp = () => {
  const [selectedDocs, setSelectedDocs] = useState<File[]>([]);

src/demoapp/index.tsx

@@ -1,11 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-
-// import DocViewerApp from "./DocViewerApp";
-import DocViewerWithInputApp from "./DocViewerWithInputApp";
+import App from "./DemoApp";
 
 const rootElement = document.getElementById("root");
-if (rootElement) {
- const root = createRoot(rootElement);
- root.render(<DocViewerWithInputApp />);
-}
+const root = createRoot(rootElement!);
+root.render(<App />);