Waku Adapter

Installation

npx shadcn@latest add @nuqs/adapter-waku

app/nuqs-waku-adapter.tsx

'use client'

import {
  type unstable_AdapterOptions as AdapterOptions,
  unstable_createAdapterProvider as createAdapterProvider,
  renderQueryString
} from 'nuqs/adapters/custom'
import { 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)

Usage

Waku is supported as a community-contributed adapter.

Install the adapter using the CLI or copy/paste above, then integrate the adapter into a _layout.tsx or _root.tsx file, by wrapping the {children} component:

app/_layout.tsx

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
}

The custom adapters APIs are not yet stable and may change in the future in a minor or patch release (not following SemVer).

Use the registry's RSS feed to stay updated on any changes.

Waku Adapter

Installation

Usage

On this page