-
Notifications
You must be signed in to change notification settings - Fork 96
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add initial value in useQueryParam hook #31
Comments
A potential workaround is by using language feature default: const [foo = 'hello', setFoo] = useQueryParam('foo', StringParam) |
@hnspn That doesn't make sense. The custom hook is for query parameters. What you want is not a default value for the query parameter, but rather a fallback value for when there is no matching query parameter. So, I don't see a reason this should go as a functionality in the custom hook. What @albinekb suggested, is the only valid solution to what you're trying to achieve. |
@albinekb's trick this solves SOME of the problem, but it doesn't actually set the value in the URL - thus i still need an if conditional to call p.s - i am not sure what happens when i comment in a closed issue, so might be be shouting into the wind. :) |
@albinekb's solution is nice, but it's only about the JS part. I want the state of this hook to be in sync with the URL, at all times, and here it would be out of sync. So why wouldn't it make sense to provide an initialiser? I could do this to force the URL to be the same: useEffect(() => {
if (!foo) {
setFoo(calculateInitialValue());
}
}, []) But this generates an unnecessary re-render of the component, which is a flaw. |
Same concern, i'd like to have the query parameter synced with the state instead of empty. |
any update on this? really hoping there is a way to specify a default. |
I used @albinekb ' solution, but it make problems when the param is The initial value would change in every render time. const [time = new Date(), setTime] = useQueryParam('time', DateQuery);
useEffect(() => {
fetchByTime(time);
}, [time]) and I think the problem would also cause by Though I can set the initial value in the hook, but it not make sense cause the initial value might be use in several hooks. |
If it's ❌ Won't work. Because query will always receives object. const [query={name: 'foo'}, setQuery] = useQueryParams({
name: StringParam
}) ✅ Let it work. Here is a little bit util function that combines the /**
* @template Q
* @param {Q} query
* @param {Q} defaultQuery
*/
export default function withDefaultQuery(query = {}, defaultQuery) {
const formatedEntries = Object.entries(query)
.map((v) => v[1] !== undefined && v)
?.filter((v) => v)
return {
...defaultQuery,
...Object.fromEntries(formatedEntries),
}
} Use it const [query, setQuery] = useQueryParams({
name: StringParam
})
export default {query: withDefaultQuery(query, {name: 'foo'}), setQuery} I hope that will help you guys 🍺 ~ |
🎉 Again, I wanna share a setQuery util. Case:// tabIndex = 0
setQuery({
tabIndex: 0
}) In this case, the url will appears "?tabIndex=0", if we wanna hide it, we should set Solution:
/**
* @template P
* @param {P} setQueryFn
* @param {(key:any, value: any)=>any} filter
* @return {P}
*/
export default function withSetUndefinedQuery(
setQueryFn,
filter = ([, value]) => value || undefined
) {
return (props) => {
setQueryFn(
Object.fromEntries(
Object.entries(props).map((kv) => [kv[0], filter([kv[0], kv[1]])])
)
)
}
} Use it const [query, setQuery] = useQueryParams({
tabIndex: NumberParam,
})
export {query: withDefaultQuery(query), withSetUndefinedQuery(setQuery)} Custom filter const filter = ([key, value])=> key === 'tabIndex' && value === 0 ? undefined : value
const newSetQuery = withSetUndefinedQuery(setQueury, filter) Here is my final usage |
I also needed to provide initial value and wrote this wrapper. It also makes sure, that state is always into url.
|
Why is this closed? This still appears to be a valid feature ask. |
We should be able to specify an initial value when using the
useParam
hookcould look like this
The text was updated successfully, but these errors were encountered: