guoyunhe
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-searchHooks
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>
);
}