Skip to content

Commit 5d18641

Browse files
franky47franky47
committed
feat: Add React Router adapter
1 parent e57c9ab commit 5d18641

File tree

11 files changed

+102
-17
lines changed

11 files changed

+102
-17
lines changed

‎packages/adapters/react/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
<title>Vite + React + TS</title>
88
</head>
99
<body>
10-
<div id="root"></div>
10+
<div id="root-vanilla"></div>
11+
<div id="root-react-router"></div>
1112
<script type="module" src="/src/main.tsx"></script>
1213
</body>
1314
</html>

‎packages/adapters/react/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"dependencies": {
1313
"nuqs": "workspace:*",
1414
"react": "rc",
15-
"react-dom": "rc"
15+
"react-dom": "rc",
16+
"react-router-dom": "^6.26.2"
1617
},
1718
"devDependencies": {
1819
"@testing-library/dom": "^10.1.0",

‎packages/adapters/react/src/App.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import { CounterButton } from './components/counter-button'
22
import { SearchInput } from './components/search-input'
33

4-
export default function App() {
4+
type AppProps = {
5+
router: string
6+
}
7+
8+
export default function App({ router }: AppProps) {
59
return (
610
<>
7-
<h1>Vite + React + nuqs</h1>
11+
<h1>{router} + nuqs</h1>
812
<div>
913
<CounterButton />
1014
<SearchInput />

‎packages/adapters/react/src/main.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
1-
import { NuqsAdapter } from 'nuqs/adapters/react'
21
import { StrictMode } from 'react'
32
import { createRoot } from 'react-dom/client'
4-
import App from './App.tsx'
3+
import { ReactRouter } from './react-router'
4+
import { VanillaReact } from './vanilla-react'
55

6-
createRoot(document.getElementById('root')!).render(
6+
createRoot(document.getElementById('root-vanilla')!).render(
77
<StrictMode>
8-
<NuqsAdapter>
9-
<App />
10-
</NuqsAdapter>
8+
<VanillaReact />
9+
</StrictMode>
10+
)
11+
12+
createRoot(document.getElementById('root-react-router')!).render(
13+
<StrictMode>
14+
<ReactRouter />
1115
</StrictMode>
1216
)

‎packages/adapters/react/src/react-router.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { NuqsAdapter } from 'nuqs/adapters/react-router'
2+
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
3+
import App from './App'
4+
5+
const router = createBrowserRouter([
6+
{
7+
path: '/',
8+
element: <App router="React Router" />
9+
}
10+
])
11+
12+
export function ReactRouter() {
13+
return (
14+
<NuqsAdapter>
15+
<RouterProvider router={router} />
16+
</NuqsAdapter>
17+
)
18+
}

‎packages/adapters/react/src/vanilla-react.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { NuqsAdapter } from 'nuqs/adapters/react'
2+
import App from './App'
3+
4+
export function VanillaReact() {
5+
return (
6+
<NuqsAdapter>
7+
<App router="Vite + React" />
8+
</NuqsAdapter>
9+
)
10+
}

‎packages/nuqs/adapters/react-router.d.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// This file is needed for projects that have `moduleResolution` set to `node`
2+
// in their tsconfig.json to be able to `import {} from 'nuqs/adapters/react-router'`.
3+
// Other module resolutions strategies will look for the `exports` in `package.json`,
4+
// but with `node`, TypeScript will look for a .d.ts file with that name at the
5+
// root of the package.
6+
7+
export * from '../dist/adapters/react-router'

‎packages/nuqs/package.json

+16-3
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,17 @@
1515
},
1616
"homepage": "https://nuqs.47ng.com",
1717
"keywords": [
18-
"nextjs",
18+
"url-state",
1919
"router",
2020
"url",
2121
"query-string",
2222
"react-hook",
2323
"useState",
24-
"next-usequerystate"
24+
"next-usequerystate",
25+
"nextjs",
26+
"react",
27+
"remix",
28+
"react-router"
2529
],
2630
"publishConfig": {
2731
"access": "public"
@@ -33,6 +37,8 @@
3337
"adapters/next.d.ts",
3438
"adapters/next/app.d.ts",
3539
"adapters/next/pages.d.ts",
40+
"adapters/remix.d.ts",
41+
"adapters/react-router.d.ts",
3642
"adapters/testing.d.ts"
3743
],
3844
"type": "module",
@@ -68,6 +74,10 @@
6874
"types": "./dist/adapters/remix.d.ts",
6975
"import": "./dist/adapters/remix.js"
7076
},
77+
"./adapters/react-router": {
78+
"types": "./dist/adapters/react-router.d.ts",
79+
"import": "./dist/adapters/react-router.js"
80+
},
7181
"./adapters/testing": {
7282
"types": "./dist/adapters/testing.d.ts",
7383
"import": "./dist/adapters/testing.js"
@@ -91,7 +101,9 @@
91101
"mitt": "^3.0.1"
92102
},
93103
"optionalDependencies": {
94-
"next": ">= 14.1.2"
104+
"next": ">= 14.1.2",
105+
"@remix-run/react": ">= 2",
106+
"react-router-dom": ">= 6"
95107
},
96108
"devDependencies": {
97109
"@microsoft/api-extractor": "^7.47.9",
@@ -104,6 +116,7 @@
104116
"npm-run-all": "^4.1.5",
105117
"react": "rc",
106118
"react-dom": "rc",
119+
"react-router-dom": "^6.26.2",
107120
"size-limit": "^11.1.4",
108121
"tsafe": "^1.7.2",
109122
"tsd": "^0.30.7",

‎packages/nuqs/src/adapters/react-router.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { useSearchParams } from 'react-router-dom'
2+
import type { AdapterOptions } from './defs'
3+
import { createAdapterProvider } from './internal.context'
4+
5+
function useNuqsReactRouterAdapter() {
6+
const [searchParams, setSearchParams] = useSearchParams()
7+
const updateUrl = (search: URLSearchParams, options: AdapterOptions) => {
8+
setSearchParams(search, {
9+
replace: options.history === 'replace',
10+
preventScrollReset: !options.scroll
11+
})
12+
}
13+
return {
14+
searchParams,
15+
updateUrl
16+
}
17+
}
18+
19+
export const NuqsAdapter = createAdapterProvider(useNuqsReactRouterAdapter)

‎packages/nuqs/tsup.config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const commonConfig = {
66
format: ['esm'],
77
experimentalDts: true,
88
outDir: 'dist',
9-
external: ['next', 'react', '@remix-run/react'],
9+
external: ['next', 'react', '@remix-run/react', 'react-router-dom'],
1010
splitting: true,
1111
treeshake: true
1212
} satisfies Options
@@ -19,6 +19,7 @@ const entrypoints = {
1919
'adapters/next/app': 'src/adapters/next/app.ts',
2020
'adapters/next/pages': 'src/adapters/next/pages.ts',
2121
'adapters/remix': 'src/adapters/remix.ts',
22+
'adapters/react-router': 'src/adapters/react-router.ts',
2223
'adapters/testing': 'src/adapters/testing.ts'
2324
},
2425
server: {

‎pnpm-lock.yaml

+10-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)