wouter-search
Version:
Provide useSearchParams(), useSearchParam() and useSearchParamJson() hooks for wouter
95 lines (71 loc) • 2.61 kB
Markdown
# wouter-search
Provide `useSearchParams()`, `useSearchParam()` and `useSearchParamJson()` hooks for [wouter](https://github.com/molefrog/wouter).
This project is based on [junwen-k](https://github.com/junwen-k)'s [initial work](https://github.com/molefrog/wouter/pull/391).
Note:
- Require wouter 3.x
- Require React 16.8+. Preact should work via [preact/compat](https://preactjs.com/guide/v10/switching-to-preact/).
## Installation
```bash
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](https://api.reactrouter.com/v7/functions/react_router.useSearchParams.html).
The first returned value is a `URLSearchParams` object and the second returned value is a setter that accepts a `URLSearchParams` object with options.
```jsx
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.
```jsx
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!
```jsx
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>
);
}
```