`useQueryState` is a react hook for storing a state object in the query string. It also responds to changes in the query string and returns the specified portion to you like it was a state.
npm install @borvik/use-querystateuseQueryState is a react hook for storing a state object in the query string. It also responds to changes in the query string and returns the specified portion to you like it was a state.
HistoryProvider. This is because this library makes use of the history api in order to change the query string, but different React libraries handle updates to the url differently (ex. react-router vs. next.js).
HistoryProvider is meant to pass down the functions necessary to work with the history api.
react-router the functions resemble those originally provided by that library.
test-app/app/components/historyProvider.tsx and test-app/app/root.tsx.
initialState\
options\
prefix?: A string key that should prefix this set of values when serializing to the query string. Ex. if two components want to use the same keys (like page) you can give them each a different prefix.\
internalState?: A boolean indicating to _not_ serialize to the query string. Useful in the same scenario as the prefix. Essentially works like a setState wrapper.\
types?: An object containing the type definitions for the query string. If not specified they will be derived from the initialState. See the @borvik/querystring for the type definitions.
tuple containing the state, and a setter function. Unlike the setter function returned from setState, _this_ setter function allows for _partial_ state updates.
batchedQSUpdatecb\
typescript
import { useQueryState } from '@borvik/use-querystate';
const [pagination, setPagination] = useQueryState({page: 1, pageSize: 10});
// pagination = {page: 1, pageSize: 10} assuming no query string
// don't call together like this, these are just examples of _how_ to call
setPagination({ page: 2 }); // ?page=2
setPagination({ page: 1, pageSize: 15 }); // ?pageSize=15
`
`typescript
import { batchedQSUpdate, useQueryState } from '@borvik/use-querystate';
const [pagination, setPagination] = useQueryState({page: 1, pageSize: 10});
// pagination = {page: 1, pageSize: 10} assuming no query string
const [filter, setFilter] = useQueryState({filter: null}, {
types: {
filter: 'any',
}
});
// filter = { filter: null } assuming no query string
batchedQSUpdate(() => {
setPagination({ page: 2 });
setFilter({ filter: 'use-querystate' });
}); // ?page=2&filter=use-querystate
`
`typescript
import { useQueryState } from '@borvik/use-querystate';
const [pagination, setPagination] = useQueryState({page: 1, pageSize: 10}, { prefix: 'my-cmp.' });
// pagination = {page: 1, pageSize: 10} assuming no query string
setPagination({ page: 2 }); // ?my-cmp.page=2
``