React Query Params Hooks

!npm bundle size
!npm type definitions
!NPM
!npm
!GitHub stars

> Easy query params handling for React

- Better Typed

Features

- :rocket: Simple, fast and light
- :factory: Set, Update, Delete, Clear
- 🪗 Provider for global configs and any environment

Install

``bash
npm install --save @better-typed/react-query-params-hooks
`

or

`bash
yarn add @better-typed/react-query-params-hooks
`

Usage

`tsx
import React from "react";
import { useQueryParams } from "@better-typed/react-query-params-hooks";

const MyComponent: React.FC = () => {
const {queryParams, queryString, stringify, setQueryParam, setQueryParams, updateQueryParams, deleteQueryParam, clearQueryParams } = useQueryParams()

return (
// ...
)
}

`

Connect to your router

First we have to wrap our App with QueryParamsProvider and provide setQueryParams and
getQueryString methods. Below we have an example of usage with React Router v6.

`tsx
import React from "react";
import { useQueryParams } from "@better-typed/react-query-params-hooks";

const App: React.FC = ({ children }) => {
const location = useLocation();
const [, setSearchParams] = useSearchParams();

return (
getQueryString={() => location.search}
setQueryParams={(search) => setSearchParams({ search }, { replace: true })}
>
{children}

);
};
``