Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Waku community adapter #848

Open
wants to merge 1 commit into
base: next
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions packages/docs/content/docs/community-adapters/waku.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
---
title: Waku
description: Integrate nuqs with Waku
---

[Waku](https://waku.gg/) is supported as a community-contributed adapter.

## Step 1: Add the adapter code

<Callout type="warn">
The custom adapters APIs are not yet stable and may change in the future
in a minor or patch release (not following SemVer).
</Callout>

```tsx title="app/nuqs-waku-adapter.tsx"
"use client";

import {
type unstable_AdapterOptions as AdapterOptions,
unstable_createAdapterProvider as createAdapterProvider,
renderQueryString,
} from "nuqs/adapters/custom";
import { useRouter_UNSTABLE as useRouter } from "waku";

function useNuqsAdapter() {
const { path, query, push, replace } = useRouter();
const searchParams = new URLSearchParams(query);
const updateUrl = (search: URLSearchParams, options: AdapterOptions) => {
const query = renderQueryString(search);
const url = path + query + location.hash;
if (options.shallow) {
options.history === "push"
? history.pushState(null, "", url)
: history.replaceState(null, "", url);
} else {
const updateMethod = options.history === "push" ? push : replace;
// bypass waku's typesafe route check by using `as never`
updateMethod(url as never);
}
// Waku router does not scroll unless the pathname changes
if (options.scroll) {
window.scrollTo(0, 0);
}
};
return {
searchParams,
updateUrl,
};
}

export const NuqsAdapter = createAdapterProvider(useNuqsAdapter);

```

## Step 2: wrap your root layout

Integrate the adapter into a _layout.tsx or _root.tsx file, by wrapping the `{children}`
component:

```tsx title="app/_layout.tsx" /NuqsAdapter/
import { Suspense, type ReactNode } from 'react';

import { NuqsAdapter } from './nuqs-waku-adapter'

type LayoutProps = { children: ReactNode };

export default async function Layout({ children }: LayoutProps) {
return (
<>
<NuqsAdapter>
<Suspense>
{children}
</Suspense>
</NuqsAdapter>
</>
);
}

export const getConfig = async () => {
return {
render: 'dynamic',
// render: 'static', // works but can cause hydration warnings
} as const;
};
```