useUrlQueryState

Use URL query string as state. This is like useState except the state value is always an object and the state is stored in the URL.

This hook parses the query string and returns that as an object along with a setter function to transition state values. The setter will transition the URL to match the query params specified.

As different router integrations handle history and navigation differently you can pass the current location and a function to replace the current URL to options.

By default it will work with window.location and the History API

For react-router:

import { useLocation, useHistory } from 'react-router';
function useRouterUrlQueryState(initialState = {}, options = {}) {
    const location = useLocation();
    const history = useHistory();
    return useUrlQueryState({}, { location, replaceUrl: history.replace });
}

For navi:

import { useUrlQueryState } from '@prestojs/routing';
import { useCallback } from 'react';
import { useCurrentRoute, useNavigation } from 'react-navi';
export default function useNaviUrlQueryState(initialState = {}, options = {}) {
   const { url } = useCurrentRoute();
   const navigation = useNavigation();
   const replaceUrl = useCallback(nextUrl => navigation.navigate(nextUrl, { replace: true }), [
       navigation,
   ]);
   return useUrlQueryState(initialState, {
       ...options,
       url,
       replaceUrl,
   });
}

NOTE: Due to the fact that everything in the URL is represented as a string the returned values in the state object will all be strings. Use options.parse to do any transforms required on these values.