https://github.com/jschwindt/react-use-search-params-state

React hook to keep state using URL search params. Based on useSearchParams from react-router-dom@6
https://github.com/jschwindt/react-use-search-params-state

react react-hook react-router react-router-dom-v6 react-state reactjs

Last synced: 2 months ago
JSON representation

React hook to keep state using URL search params. Based on useSearchParams from react-router-dom@6

• Host: GitHub
• URL: https://github.com/jschwindt/react-use-search-params-state
• Owner: jschwindt
• License: other
• Created: 2022-10-01T20:56:56.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-08T15:42:29.000Z (5 months ago)
• Last Synced: 2024-09-30T23:48:10.510Z (3 months ago)
• Topics: react, react-hook, react-router, react-router-dom-v6, react-state, reactjs
• Language: TypeScript
• Homepage:
• Size: 1.4 MB
• Stars: 12
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-use-search-params-state

React hook to use URL search params as state. It has the same API as `useState` and works with `react-router-dom-v6`.

## Install

```bash

npm install react-use-search-params-state

```

or

```bash

yarn add react-use-search-params-state

```

## Usage

Import the hook and the params definition type.

Then create a params definition object containing the params you want to use.

The key is the name of the param. The value is an object with the following properties:

`type`: the type of the param. Can be `string`, `number` or `boolean`.

`default`: the default value of the param. If the param is not present in the URL, this value will be used.

`multiple`: (optional) if the param can have multiple values. If `true`, the value will be an array of the type specified in `type`.

Example:

```tsx

import { useSearchParamsState, SearchParamsStateType } from 'react-use-search-params-state'

const filtersDefaults: SearchParamsStateType = {

  minPrice: { type: 'number', default: null },

  maxPrice: { type: 'number', default: null },

  isSold: { type: 'boolean', default: true },

  types: { type: 'string', default: null, multiple: true },

  years: { type: 'number', default: [], multiple: true },

}

```

Use the hook in your functional component the same way you use `useState`:

```tsx

const TestFilters = () => {

  const [filterParams, setFilterParams] = useSearchParamsState(filtersDefaults)

  return 
Min Price: {filterParams.minPrice}

}

```


When you need to change any of the values, use the `set...` function with an object containing the name of the param and the new value(s):

```tsx



  Min price:

   setFilterParams({ minPrice: e.target.value })}

  />

   setFilterParams({ minPrice: 100 })}>set minPrice to 100



```


The `set...` function will update only the params that are present in the object. The rest of the params will remain the same.

This allow to have multiple components that can save their state in the URL without interfering with each other.

For a complete example, see the `example/` folder or this [CodeSandbox](https://codesandbox.io/s/angry-morning-xktesm?file=/src/Example.tsx).

## TODO

- [ ] Add tests

## License

[ISC](http://opensource.org/licenses/ISC) © [Juan Schwindt](https://github.com/jschwindt)