https://github.com/katt/next-use-query-params
https://github.com/katt/next-use-query-params
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/katt/next-use-query-params
- Owner: KATT
- Created: 2021-04-18T22:34:17.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-19T13:02:54.000Z (about 5 years ago)
- Last Synced: 2025-03-31T13:27:28.388Z (about 1 year ago)
- Language: TypeScript
- Homepage: next-use-query-params-git-main-katt.vercel.app
- Size: 36.1 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# `useQueryParams()`
Type-safe query param handling for [Next.js](https://nextjs.org/).
- Demo at: https://next-use-query-params.katt.dev/
- CodeSandbox: https://githubbox.com/KATT/next-use-query-params
## Example usage
```tsx
const { setParams, params } = useQueryParams(
{
str: "string",
num: "number",
pets: {
type: "string[]",
},
bool: "boolean",
withDefault: {
type: "number",
default: 42,
},
checky: {
type: "string[]",
default: ["1"],
},
},
);
```
## Available types
```tsx
type ParamOptionTypes =
| "string"
| "string[]"
| "number"
| "number[]"
| "boolean";
```
## Options
```tsx
export interface UseQueryParamsOptions {
type?: "replace" | "push";
transitionOptions?: TransitionOptions;
}
```
**Example:**
```tsx
const { setParams, params } = useQueryParams(
{
// [...]
},
{
type: "replace",
transitionOptions: {
scroll: true,
}
}
);
```
## SSR
In order to make this work in SSR, you have to opt-out of SSG - see [`pages/_app.tsx`](pages/_app.tsx) for an example on how to disable SSG.