Type safety is just nice thing to have in this package. Main power is that with this package you have a hook to change the URL parameter dynamically, which is currently really painful using Next.js hooks useRouter, usePathname, and useSearchParams. So instead of this (copied from some GitHub thread): const router = useRouter(); const pathname = usePathname(); const searchParams = useSearchParams(); const current = new URLSearchParams(Array.from(searchParams.entries())); const search = current.toString(); const query = search ? `?${search}` : ""; router.push(`${pathname}${query}`); We can just do this: // Create hook const [search, setSearch] = useQueryState(‘search, { defaultValue: '' }) // Set `search` directly in url setSearch(search);
⚔ Ready to become a true web dev warrior? If the answer is YES then it's time to join the Mighty Horde! ⚔
Loving the videos!!
Thank you bro! Really appreciate it! ⚔
well just what I need
Awesome to hear that! If something is not going well just ping me here!
Does it work with other types of inputs like checkboxes, radio buttons and select inputs?
Yes! Tested it out with bunch of stuff. It works same like regular useState hook.
@@orcdev Sounds good, will test it...
@@Ahmed85Fathy Awesome!
great video
Glad you enjoyed it! ⚔️
Zod is enough for this. I don't think for this simple thing we should use an external package
Type safety is just nice thing to have in this package. Main power is that with this package you have a hook to change the URL parameter dynamically, which is currently really painful using Next.js hooks useRouter, usePathname, and useSearchParams.
So instead of this (copied from some GitHub thread):
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const current = new URLSearchParams(Array.from(searchParams.entries()));
const search = current.toString();
const query = search ? `?${search}` : "";
router.push(`${pathname}${query}`);
We can just do this:
// Create hook
const [search, setSearch] = useQueryState(‘search, { defaultValue: '' })
// Set `search` directly in url
setSearch(search);
@@orcdev also const searchParams = useSearchParams(); need suspensor