Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pbeshai/use-query-params
React Hook for managing state in URL query parameters with easy serialization.
https://github.com/pbeshai/use-query-params
hooks query query-parameters queryparams querystring react react-hooks reactjs url
Last synced: about 2 months ago
JSON representation
React Hook for managing state in URL query parameters with easy serialization.
- Host: GitHub
- URL: https://github.com/pbeshai/use-query-params
- Owner: pbeshai
- License: isc
- Created: 2019-03-12T22:39:30.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-12-27T02:38:05.000Z (6 months ago)
- Last Synced: 2024-05-03T20:23:25.450Z (about 2 months ago)
- Topics: hooks, query, query-parameters, queryparams, querystring, react, react-hooks, reactjs, url
- Language: TypeScript
- Homepage: https://pbeshai.github.io/use-query-params
- Size: 7.27 MB
- Stars: 2,100
- Watchers: 14
- Forks: 95
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-list - use-query-params
- awesome-react-hooks - `use-query-params`
- awesome-react-hooks-cn - `use-query-params`
- awesome-react-hooks - `use-query-params`
- awesome-stars - use-query-params
- fucking-awesome-react-hooks - `use-query-params`
- docsify-awesome-stars - pbeshai/use-query-params - React Hook for managing state in URL query parameters with easy serialization. (TypeScript)
- awesome-stars - use-query-params
- awesome-stars - pbeshai/use-query-params - React Hook for managing state in URL query parameters with easy serialization. (TypeScript)
- awesome-react-hooks - `use-query-params`
README
useQueryParams
A React Hook, HOC, and Render Props solution for managing state in URL query parameters with easy serialization.
Works with React Router 5 and 6 out of the box. TypeScript supported.
When creating apps with easily shareable URLs, you often want to encode state as query parameters, but all query parameters must be encoded as strings. `useQueryParams` allows you to easily encode and decode data of any type as query parameters with smart memoization to prevent creating unnecessary duplicate objects. It uses [serialize-query-params](/packages/serialize-query-params/).
## Docs
* [use-query-params docs](/packages/use-query-params/#readme)
* [serialize-query-params docs](/packages/serialize-query-params/#readme)
## Packages
This is a monorepo managed with [Lerna](https://github.com/lerna/lerna).
| Package | Version | Docs | Description |
| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| [`use-query-params`](/packages/use-query-params) | [](https://www.npmjs.com/package/use-query-params) | [](/packages/use-query-params/#readme) | use-query-params React library |
| [`serialize-query-params`](/packages/serialize-query-params) | [](https://www.npmjs.com/package/serialize-query-params) | [](/packages/serialize-query-params/#readme) | serialize-query-params js library |
## Development
To get running locally:
```
npm install
npx lerna bootstrap --hoist --scope "use-query-params" --scope "serialize-query-params"
npm build
npm test
```
Set up examples:
```
lerna bootstrap --scope "*-example"
lerna link
```
Then run one:
```
lerna run --scope react-router-example start
```