From 8261402285e725ca45c4f59c7c22a2ebcdc8087f Mon Sep 17 00:00:00 2001 From: Rob Marscher Date: Sun, 5 Jan 2025 20:04:07 -0500 Subject: [PATCH] waku community adapter --- .../content/docs/community-adapters/waku.mdx | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 packages/docs/content/docs/community-adapters/waku.mdx diff --git a/packages/docs/content/docs/community-adapters/waku.mdx b/packages/docs/content/docs/community-adapters/waku.mdx new file mode 100644 index 000000000..5ef5e7e9c --- /dev/null +++ b/packages/docs/content/docs/community-adapters/waku.mdx @@ -0,0 +1,74 @@ +--- +title: Waku +description: Integrate nuqs with Waku +--- + +[Waku](https://waku.gg/) is supported as a community-contributed adapter. + +## Step 1: Add the adapter code + + + The custom adapters APIs are not yet stable and may change in the future + in a minor or patch release (not following SemVer). + + +```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 { query, push, replace } = useRouter(); + const searchParams = new URLSearchParams(query); + const updateUrl = (search: URLSearchParams, options: AdapterOptions) => { + if (options.history === "push") { + push(renderQueryString(search)); + } else { + replace(renderQueryString(search)); + } + }; + 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 ( + <> + + + {children} + + + + ); +} + +export const getConfig = async () => { + return { + render: 'static', + } as const; +}; +```