🔡 react-use-query-param-string

React hook for easily getting and setting query param strings.

npm Version  View project on GitHub  Deploy Status

Buy me a coffee Sponsor

## Documentation Read the **[official documentation](https://justinmahar.github.io/react-use-query-param-string/)**. ## Overview This hook allows you to use a query param string the same way you'd use regular React state (i.e. via React.useState). You can also use the getQueryParams() and setQueryParams() functions to get/set query params yourself. ### Features include: - **👍 Read and set query params with ease** - Use query param strings just like you would React state - **🔄 State syncing across components** - Hooks stay synchronized even when used in multiple components. - **🙅‍♂️ No Router interference** - Uses `window` functions that don't interfere with router frameworks. - **💁‍♀️ Convenience functions available** - Use `getQueryParams()` or `setQueryParams()` to get/set query params yourself. ## Donate If this project helped save you time, please consider buying me a coffee, which powers my development (and life). Your support is much appreciated! Sponsor via GitHub  Buy me a coffee  Buy me 3 coffees  Buy me 5 coffees ## Table of Contents - [Documentation](#documentation) - [Overview](#overview) - [Features include:](#features-include) - [Donate](#donate) - [Table of Contents](#table-of-contents) - [Installation](#installation) - [Quick Start](#quick-start) - [TypeScript](#typescript) - [Icon Attribution](#icon-attribution) - [Contributing](#contributing) - [⭐ Found It Helpful? Star It!](#-found-it-helpful-star-it) - [License](#license) ## Installation ``` npm i react-use-query-param-string ``` ## Quick Start ```jsx import { useQueryParamString } from 'react-use-query-param-string'; ``` ```jsx // Will use query param `q` and have a default value of empty string. // `initialized` will be true after the value has been read from the query params. const [searchText, setSearchText, initialized] = useQueryParamString('q', ''); ``` See the [useQueryParamString docs](https://justinmahar.github.io/react-use-query-param-string/?path=/story/hooks-usequeryparamstring--docs) for more usage details, including static functions. ## TypeScript Type definitions have been included for [TypeScript](https://www.typescriptlang.org/) support. ## Icon Attribution Favicon by [Twemoji](https://github.com/twitter/twemoji). ## Contributing Open source software is awesome and so are you. 😎 Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help. For major changes, open an issue first to discuss what you'd like to change. ## ⭐ Found It Helpful? [Star It!](https://github.com/justinmahar/react-use-query-param-string/stargazers) If you found this project helpful, let the community know by giving it a [star](https://github.com/justinmahar/react-use-query-param-string/stargazers): [👉⭐](https://github.com/justinmahar/react-use-query-param-string/stargazers) Want to support the project? Feel free to grab me a coffee, which is my main source of fuel for development: Buy me a coffee  Buy me 3 coffees  Buy me 5 coffees ## License See [LICENSE.md](https://justinmahar.github.io/react-use-query-param-string/?path=/docs/license--docs).