remix-run · mjackson · Oct 7, 2021 · Oct 4, 2021 · Oct 4, 2021 · Oct 4, 2021
diff --git a/examples/modal/.gitignore b/examples/modal/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/modal/.stackblitzrc b/examples/modal/.stackblitzrc
@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "npm run dev"
+}
diff --git a/examples/modal/README.md b/examples/modal/README.md
@@ -0,0 +1,7 @@
+# Modal Example
+
+## Preview
+
+Open this example on [StackBlitz](https://stackblitz.com):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router/tree/dev/examples/modal?file=src/App.tsx)
diff --git a/examples/modal/index.html b/examples/modal/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Router - Modal Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/modal/package.json b/examples/modal/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "modal",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@reach/dialog": "0.16.0",
+    "history": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router": "next",
+    "react-router-dom": "next"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^2.2.1",
+    "@types/node": "14.x",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.9",
+    "@vitejs/plugin-react": "^1.0.1",
+    "typescript": "^4.3.5",
+    "vite": "^2.5.0"
+  }
+}
diff --git a/examples/modal/src/App.tsx b/examples/modal/src/App.tsx
@@ -0,0 +1,193 @@
+import * as React from "react";
+import {
+  Routes,
+  Route,
+  Outlet,
+  Link,
+  useLocation,
+  useNavigate,
+  useParams
+} from "react-router-dom";
+import { Dialog } from "@reach/dialog";
+import "@reach/dialog/styles.css";
+
+import { IMAGES, getImageById } from "./images";
+
+export default function App() {
+  let location = useLocation();
+
+  /*
+    This piece of state is set when one of the gallery links is clicked.
+    The `image` state is the location that we were at when one of the gallery
+    links was clicked. If it's there, use it as the location for the <Routes>
+    so we show the gallery in the background, behind the modal.
+  */
+  let state = location.state as { pinnedLocation?: Location };
+  let pinnedLocation = state?.pinnedLocation;
+
+  return (
+    <div>
+      <h1>Welcome to the app!</h1>
+      <Routes location={pinnedLocation || location}>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="gallery" element={<Gallery />} />
+          <Route path="/img/:id" element={<ImageView />} />
+          <Route path="*" element={<NoMatch />} />
+        </Route>
+      </Routes>
+
+      {/* Show the modal when a image page is set */}
+      {pinnedLocation && (
+        <Routes>
+          <Route path="/img/:id" element={<Modal />} />
+        </Routes>
+      )}
+    </div>
+  );
+}
+
+function Layout() {
+  return (
+    <div>
+      <nav>
+        <ul>
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/gallery">Gallery</Link>
+          </li>
+        </ul>
+      </nav>
+
+      <hr />
+
+      <Outlet />
+    </div>
+  );
+}
+
+function Home() {
+  return (
+    <div>
+      <h2>Home</h2>
+
+      <h3>Featured Images</h3>
+      <ul>
+        <li>
+          <Link to="/img/1">Image 1</Link>
+        </li>
+        <li>
+          <Link to="/img/2">Image 2</Link>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+function Gallery() {
+  let location = useLocation();
+
+  return (
+    <div style={{ padding: "0 24px" }}>
+      <h2>Gallery</h2>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+          gap: "24px"
+        }}
+      >
+        {IMAGES.map(image => (
+          <Link
+            key={image.id}
+            to={`/img/${image.id}`}
+            // This is the trick! This link sets
+            // the `background` in location state.
+            state={{ pinnedLocation: location }}
+          >
+            <img
+              width={200}
+              height={200}
+              style={{
+                width: "100%",
+                aspectRatio: "1 / 1",
+                height: "auto",
+                borderRadius: "8px"
+              }}
+              src={image.src}
+              alt={image.title}
+            />
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ImageView() {
+  let { id } = useParams<"id">();
+  let image = getImageById(Number(id));
+
+  if (!image) return <div>Image not found</div>;
+
+  return (
+    <div>
+      <h1>{image.title}</h1>
+      <img width={400} height={400} src={image.src} alt="" />
+    </div>
+  );
+}
+
+function Modal() {
+  let navigate = useNavigate();
+  let { id } = useParams<"id">();
+  let image = getImageById(Number(id));
+  let buttonRef = React.useRef<HTMLButtonElement>(null);
+
+  function onDismiss() {
+    navigate(-1);
+  }
+
+  if (!image) return null;
+
+  return (
+    <Dialog
+      aria-labelledby="label"
+      onDismiss={onDismiss}
+      initialFocusRef={buttonRef}
+    >
+      <div style={{ display: "grid", justifyContent: "center" }}>
+        <h1 id="label" style={{ margin: 0 }}>
+          {image.title}
+        </h1>
+        <img
+          style={{ margin: "16px 0", borderRadius: "8px" }}
+          width={400}
+          height={400}
+          src={image.src}
+          alt=""
+        />
+        <button
+          style={{ display: "block" }}
+          ref={buttonRef}
+          onClick={onDismiss}
+        >
+          Close
+        </button>
+      </div>
+    </Dialog>
+  );
+}
+
+function NoMatch() {
+  return (
+    <div>
+      <h2>Nothing to see here!</h2>
+      <p>
+        <Link to="/">Go to the home page</Link>
+      </p>
+    </div>
+  );
+}
diff --git a/examples/modal/src/images.ts b/examples/modal/src/images.ts
@@ -0,0 +1,28 @@
+let IMAGES = [
+  {
+    id: 0,
+    title: "Enjoying a cup of coffee while rating Starbucks.",
+    src: "https://images.unsplash.com/photo-1631016800696-5ea8801b3c2a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMzM2Mzg4Ng&ixlib=rb-1.2.1&q=80&w=400"
+  },
+  {
+    id: 1,
+    title: "Magical winter sunrise with perfect untouched snow",
+    src: "https://images.unsplash.com/photo-1618824834718-92f8469a4dd1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMzM2NDAzMw&ixlib=rb-1.2.1&q=80&w=400"
+  },
+  {
+    id: 2,
+    title: "Dalmatian with pumpkins",
+    src: "https://images.unsplash.com/photo-1633289944756-6295be214e16?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMzM2NDA3Nw&ixlib=rb-1.2.1&q=80&w=400"
+  },
+  {
+    id: 3,
+    title: "Fall into Autumn🍂🐶",
+    src: "https://images.unsplash.com/photo-1633172905740-2eb6730c95b4?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzMzM2NDEwMg&ixlib=rb-1.2.1&q=80&w=400"
+  }
+];
+
+function getImageById(id: number) {
+  return IMAGES.find(image => image.id === id);
+}
+
+export { IMAGES, getImageById };
diff --git a/examples/modal/src/index.css b/examples/modal/src/index.css
@@ -0,0 +1,12 @@
+body {
+  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/examples/modal/src/main.tsx b/examples/modal/src/main.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
+
+import App from "./App";
+import "./index.css";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+  document.getElementById("root")
+);
diff --git a/examples/modal/src/vite-env.d.ts b/examples/modal/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/modal/tsconfig.json b/examples/modal/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "importsNotUsedAsValues": "error"
+  },
+  "include": ["./src"]
+}
diff --git a/examples/modal/vite.config.ts b/examples/modal/vite.config.ts
@@ -0,0 +1,32 @@
+import * as path from "path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import rollupReplace from "@rollup/plugin-replace";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    rollupReplace({
+      preventAssignment: true,
+      values: {
+        __DEV__: JSON.stringify(true),
+        "process.env.NODE_ENV": JSON.stringify("development")
+      }
+    }),
+    react()
+  ],
+  resolve: process.env.USE_SOURCE
+    ? {
+        alias: {
+          "react-router": path.resolve(
+            __dirname,
+            "../../packages/react-router/index.tsx"
+          ),
+          "react-router-dom": path.resolve(
+            __dirname,
+            "../../packages/react-router-dom/index.tsx"
+          )
+        }
+      }
+    : {}
+});