wouter-search

Provide useSearchParams(), useSearchParam() and useSearchParamJson() hooks for wouter.

This project is based on junwen-k's initial work.

Note:

• Require wouter 3.x
• Require React 16.8+. Preact should work via preact/compat.

Installation

npm install --save wouter-search

Hooks

useSearchParams()

Allow you to get and set all search parameters. The API is similar but not the same to react-router's. The first returned value is a URLSearchParams object and the second returned value is a setter that accepts a URLSearchParams object with options.

import { useSearchParams } from 'wouter-search';

function MyPage() {
  const [searchParams, setSearchParams] = useSearchParams();

  return (
    <button
      onClick={() => {
        // push new history entry
        setSearchParams((prev) => {
          prev.set('foo', 'bar');
          return prev;
        });
        // or replace history entry
        setSearchParams(
          (prev) => {
            prev.set('foo', 'bar');
            return prev;
          },
          {
            replace: true,
          },
        );
      }}
    >
      foobar
    </button>
  );
}

useSearchParam()

A simple wrapper around useSearchParams. By giving a key/name, you can control a specific search parameter straight-forward.

import { useSearchParam, useSearchParams } from 'wouter-search';

function MyPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [query, setQuery] = useSearchParam('query', searchParams, setSearchParams);

  return <input onChange={(e) => setQuery(e.target.value, { replace: true })} />;
}

useSearchParamJson()

If your search parameter contains JSON data, useSearchParamJson() will make your life much easier!

import { useSearchParamJson, useSearchParams } from 'wouter-search';

function MyPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [solution, setSolution] = useSearchParamJson('solution', searchParams, setSearchParams);

  return (
    <div>
      <h1>{solution.name}</h1>
      <p>{solution.description}</p>
    </div>
  );
}