React query params hooks
npm install @better-typed/react-query-params-hooks
!npm bundle size
!npm type definitions
!NPM
!npm
!GitHub stars
> Easy query params handling for React
- :rocket: Simple, fast and light
- :factory: Set, Update, Delete, Clear
- 🪗 Provider for global configs and any environment
``bash`
npm install --save @better-typed/react-query-params-hooks
or
`bash`
yarn add @better-typed/react-query-params-hooks
`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 (
// ...
)
}
`
First we have to wrap our App with QueryParamsProvider and provide setQueryParams andgetQueryString 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 (
setQueryParams={(search) => setSearchParams({ search }, { replace: true })}
>
{children}
);
};
``