Skip to content

Commit

Permalink
waku community adapter
Browse files Browse the repository at this point in the history
  • Loading branch information
rmarscher committed Jan 6, 2025
1 parent 39d6f4a commit e112093
Showing 1 changed file with 90 additions and 0 deletions.
90 changes: 90 additions & 0 deletions packages/docs/content/docs/community-adapters/waku.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
---
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";

export function renderURL(base: string, search: URLSearchParams) {
const hashlessBase = base.split("#")[0] ?? "";
const query = renderQueryString(search);
const hash = location.hash;
return hashlessBase + query + hash;
}

function useNuqsAdapter() {
const { query, push, replace } = useRouter();
const searchParams = new URLSearchParams(query);
const updateUrl = (search: URLSearchParams, options: AdapterOptions) => {
if (options.shallow) {
const url = renderURL(location.origin + location.pathname, search);
options.history === "push"
? history.pushState(null, "", url)
: history.replaceState(null, "", url);
} else {
const updateMethod = options.history === "push" ? push : replace;
updateMethod(renderQueryString(search) as any);
}
// 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;
};
```

0 comments on commit e112093

Please sign in to comment.