example with react-router (#25)

* initial commit * update to typescript * align package.json * fix naming * move to subscribe function * working, more concise solution * fix eslint errors * rename import according to suggestion * add dependencies to package.json and pnpm-lock * add skipLibCheck to tsconfig
jotaijs · Jan 30, 2024 · c1046ab · c1046ab
1 parent 3d9666d
commit c1046ab
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 2 deletions.
diff --git a/examples/04_react_router/package.json b/examples/04_react_router/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "jotai-location-example",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "history": "5.1.0", 
+    "jotai": "latest",
+    "jotai-location": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-router-dom": "6.8.0",
+    "react-scripts": "latest",
+    "typescript": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+}
diff --git a/examples/04_react_router/public/index.html b/examples/04_react_router/public/index.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <title>jotai-location example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/examples/04_react_router/src/App.tsx b/examples/04_react_router/src/App.tsx
@@ -0,0 +1,51 @@
+import {
+  unstable_HistoryRouter as HistoryRouter,
+  Routes,
+  Route,
+  Link,
+} from 'react-router-dom';
+import { atomWithLocation } from 'jotai-location';
+import { useAtomValue } from 'jotai';
+import * as React from 'react';
+import history from './routerHistory';
+
+const Route1 = <h1>Hello</h1>;
+const Route2 = <h1>World</h1>;
+const location = atomWithLocation({
+  getLocation: () => ({
+    searchParams: new URLSearchParams(history.location.search),
+    ...history.location,
+  }),
+  subscribe: (callback) => history.listen(callback),
+});
+
+const App = () => {
+  const loc = useAtomValue(location);
+  return (
+    <div
+      className="App"
+      style={{
+        textAlign: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px',
+      }}
+    >
+      {/* @ts-expect-error: https://github.com/remix-run/react-router/issues/9630#issuecomment-1341643731 */}
+      <HistoryRouter history={history}>
+        current pathname in atomWithLocation: &quot;{loc.pathname}&quot;
+        <div style={{ display: 'flex', gap: '16px', placeContent: 'center' }}>
+          <Link to="/1"> to 1</Link>
+          <Link to="/1/123"> to 1/123</Link>
+          <Link to="/2"> to 2</Link>
+          <Link to="/2/123"> to 2/123</Link>
+        </div>
+        <Routes>
+          <Route path="/1" element={Route1} />
+          <Route path="/2" element={Route2} />
+        </Routes>
+      </HistoryRouter>
+    </div>
+  );
+};
+export default App;
diff --git a/examples/04_react_router/src/index.tsx b/examples/04_react_router/src/index.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+const ele = document.getElementById('app');
+if (ele) {
+  createRoot(ele).render(<App />);
+}
diff --git a/examples/04_react_router/src/routerHistory.ts b/examples/04_react_router/src/routerHistory.ts
@@ -0,0 +1,4 @@
+import { createBrowserHistory } from 'history';
+
+const routerHistory = createBrowserHistory();
+export default routerHistory;
diff --git a/package.json b/package.json
@@ -34,7 +34,8 @@
     "tsc-test": "tsc --project . --noEmit",
     "examples:01_minimal": "DIR=01_minimal EXT=js webpack serve",
     "examples:02_typescript": "DIR=02_typescript EXT=tsx webpack serve",
-    "examples:03_hash": "DIR=03_hash EXT=tsx webpack serve"
+    "examples:03_hash": "DIR=03_hash EXT=tsx webpack serve",
+    "examples:04_react_router": "DIR=04_react_router EXT=tsx webpack serve"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -63,6 +64,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
+    "history": "5.1.0",
     "html-webpack-plugin": "^5.5.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -73,6 +75,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.11",
+    "react-router-dom": "6.8.0",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.5.0",
     "typescript": "^5.2.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tsconfig.json b/tsconfig.json
@@ -15,6 +15,7 @@
     "baseUrl": ".",
     "paths": {
       "jotai-location": ["./src"]
-    }
+    },
+    "skipLibCheck": true
   }
 }