-
-
Save vmptk/63d6e3c8dbd4dabf1a6374cb96d37c2f to your computer and use it in GitHub Desktop.
useQueryParam
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default function useQueryParam<T>( | |
key: string, | |
push: (path: string) => void, | |
defaultValue?: T, | |
): [T, (value: T) => void] { | |
const { pathname, search } = location | |
const query = new URLSearchParams(search) | |
const rawValue = query.get(key) | |
// Here we determine whether or not the default value, (and prob. the value) | |
// is an array or not, to know whether to parse the url param or not later. | |
const isDefaultValueArray = Array.isArray(defaultValue) | |
// Here we also try ot determine whether or not the actual value from the | |
// array is an array or not (but a bit hackier since its a string). | |
const isRawValueArray = rawValue?.startsWith('[') && rawValue?.endsWith(']') | |
// This would preferably be a function to increase readability, but since the | |
// var should be instantly accessible we need to use a inline ternary here. | |
const value = ( | |
rawValue | |
? isDefaultValueArray | |
? isRawValueArray | |
? (JSON.parse(rawValue) as T) | |
: [rawValue] | |
: rawValue | |
: defaultValue | |
) as T | |
const setValue = (newValue: T) => { | |
// If the default value is an array, we stringify the new value | |
if (isDefaultValueArray) { | |
query.set(key, JSON.stringify(newValue)) | |
} else { | |
// Otherwise we simply make sure it's a string | |
query.set(key, String(newValue)) | |
} | |
// Lastly, we go ahead and push the new path | |
push(pathname + `?${query.toString()}`) | |
} | |
return [value, setValue] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment