feat: Add React Router adapter

47ng · Oct 22, 2024 · cb30a20 · cb30a20
1 parent acae43c
commit cb30a20
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 17 deletions.
diff --git a/packages/adapters/react/index.html b/packages/adapters/react/index.html
@@ -7,7 +7,8 @@
     <title>Vite + React + TS</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root-vanilla"></div>
+    <div id="root-react-router"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/packages/adapters/react/package.json b/packages/adapters/react/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "nuqs": "workspace:*",
     "react": "rc",
-    "react-dom": "rc"
+    "react-dom": "rc",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.1.0",

diff --git a/packages/adapters/react/src/App.tsx b/packages/adapters/react/src/App.tsx
@@ -1,10 +1,14 @@
 import { CounterButton } from './components/counter-button'
 import { SearchInput } from './components/search-input'
 
-export default function App() {
+type AppProps = {
+  router: string
+}
+
+export default function App({ router }: AppProps) {
   return (
     <>
-      <h1>Vite + React + nuqs</h1>
+      <h1>{router} + nuqs</h1>
       <div>
         <CounterButton />
         <SearchInput />

diff --git a/packages/adapters/react/src/main.tsx b/packages/adapters/react/src/main.tsx
@@ -1,12 +1,16 @@
-import { NuqsAdapter } from 'nuqs/adapters/react'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
+import { ReactRouter } from './react-router'
+import { VanillaReact } from './vanilla-react'
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById('root-vanilla')!).render(
   <StrictMode>
-    <NuqsAdapter>
-      <App />
-    </NuqsAdapter>
+    <VanillaReact />
+  </StrictMode>
+)
+
+createRoot(document.getElementById('root-react-router')!).render(
+  <StrictMode>
+    <ReactRouter />
   </StrictMode>
 )
diff --git a/packages/adapters/react/src/react-router.tsx b/packages/adapters/react/src/react-router.tsx
@@ -0,0 +1,18 @@
+import { NuqsAdapter } from 'nuqs/adapters/react-router'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import App from './App'
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App router="React Router" />
+  }
+])
+
+export function ReactRouter() {
+  return (
+    <NuqsAdapter>
+      <RouterProvider router={router} />
+    </NuqsAdapter>
+  )
+}
diff --git a/packages/adapters/react/src/vanilla-react.tsx b/packages/adapters/react/src/vanilla-react.tsx
@@ -0,0 +1,10 @@
+import { NuqsAdapter } from 'nuqs/adapters/react'
+import App from './App'
+
+export function VanillaReact() {
+  return (
+    <NuqsAdapter>
+      <App router="Vite + React" />
+    </NuqsAdapter>
+  )
+}
diff --git a/packages/nuqs/adapters/react-router.d.ts b/packages/nuqs/adapters/react-router.d.ts
@@ -0,0 +1,7 @@
+// This file is needed for projects that have `moduleResolution` set to `node`
+// in their tsconfig.json to be able to `import {} from 'nuqs/adapters/react-router'`.
+// Other module resolutions strategies will look for the `exports` in `package.json`,
+// but with `node`, TypeScript will look for a .d.ts file with that name at the
+// root of the package.
+
+export * from '../dist/adapters/react-router'
diff --git a/packages/nuqs/package.json b/packages/nuqs/package.json
@@ -15,13 +15,17 @@
   },
   "homepage": "https://nuqs.47ng.com",
   "keywords": [
-    "nextjs",
+    "url-state",
     "router",
     "url",
     "query-string",
     "react-hook",
     "useState",
-    "next-usequerystate"
+    "next-usequerystate",
+    "nextjs",
+    "react",
+    "remix",
+    "react-router"
   ],
   "publishConfig": {
     "access": "public"
@@ -33,6 +37,8 @@
     "adapters/next.d.ts",
     "adapters/next/app.d.ts",
     "adapters/next/pages.d.ts",
+    "adapters/remix.d.ts",
+    "adapters/react-router.d.ts",
     "adapters/testing.d.ts"
   ],
   "type": "module",
@@ -68,6 +74,10 @@
       "types": "./dist/adapters/remix.d.ts",
       "import": "./dist/adapters/remix.js"
     },
+    "./adapters/react-router": {
+      "types": "./dist/adapters/react-router.d.ts",
+      "import": "./dist/adapters/react-router.js"
+    },
     "./adapters/testing": {
       "types": "./dist/adapters/testing.d.ts",
       "import": "./dist/adapters/testing.js"
@@ -91,7 +101,9 @@
     "mitt": "^3.0.1"
   },
   "optionalDependencies": {
-    "next": ">= 14.1.2"
+    "next": ">= 14.1.2",
+    "@remix-run/react": ">= 2",
+    "react-router-dom": ">= 6"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.47.9",
@@ -103,6 +115,7 @@
     "next": "14.2.15",
     "react-dom": "catalog:react19rc",
     "react": "catalog:react19rc",
+    "react-router-dom": "^6.26.2",
     "size-limit": "^11.1.6",
     "tsafe": "^1.7.5",
     "tsd": "^0.31.2",

diff --git a/packages/nuqs/src/adapters/react-router.ts b/packages/nuqs/src/adapters/react-router.ts
@@ -0,0 +1,19 @@
+import { useSearchParams } from 'react-router-dom'
+import type { AdapterOptions } from './defs'
+import { createAdapterProvider } from './internal.context'
+
+function useNuqsReactRouterAdapter() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const updateUrl = (search: URLSearchParams, options: AdapterOptions) => {
+    setSearchParams(search, {
+      replace: options.history === 'replace',
+      preventScrollReset: !options.scroll
+    })
+  }
+  return {
+    searchParams,
+    updateUrl
+  }
+}
+
+export const NuqsAdapter = createAdapterProvider(useNuqsReactRouterAdapter)
diff --git a/packages/nuqs/tsup.config.ts b/packages/nuqs/tsup.config.ts
@@ -6,7 +6,7 @@ const commonConfig = {
   format: ['esm'],
   experimentalDts: true,
   outDir: 'dist',
-  external: ['next', 'react', '@remix-run/react'],
+  external: ['next', 'react', '@remix-run/react', 'react-router-dom'],
   splitting: true,
   treeshake: true
 } satisfies Options
@@ -19,6 +19,7 @@ const entrypoints = {
     'adapters/next/app': 'src/adapters/next/app.ts',
     'adapters/next/pages': 'src/adapters/next/pages.ts',
     'adapters/remix': 'src/adapters/remix.ts',
+    'adapters/react-router': 'src/adapters/react-router.ts',
     'adapters/testing': 'src/adapters/testing.ts'
   },
   server: {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml