feat: ✨ enable async parameter setting in query param store and update related tests

Author: abhishekbhardwaj

examples/next/src/console.tsx

@@ -13,7 +13,9 @@ const Console: React.FC<ConsoleProps> = () => {
         {JSON.stringify(params, null, 2)}
       </pre>
       <button
-        onClick={() => setParams({ search: 'test' })}
+        onClick={async () => {
+          await setParams({ search: 'test' })
+        }}
         className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
       >
         Set Search to "test"

examples/next/src/pages/[...slug].tsx

@@ -17,14 +17,18 @@ export default function Home() {
         <input
           type="text"
           value={params.search ?? ''}
-          onChange={(e) => setParams({ search: e.target.value })}
+          onChange={async (e) => {
+            await setParams({ search: e.target.value })
+          }}
           placeholder="Search"
           className="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
         />
         <input
           type="number"
           value={params.page ?? ''}
-          onChange={(e) => setParams({ page: parseInt(e.target.value, 10) })}
+          onChange={async (e) => {
+            await setParams({ page: parseInt(e.target.value, 10) })
+          }}
           placeholder="Page"
           className="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
         />

examples/next/src/pages/defaults.tsx

@@ -19,14 +19,18 @@ export default function Home() {
         <input
           type="text"
           value={params.search ?? ''}
-          onChange={(e) => setParams({ search: e.target.value })}
+          onChange={async (e) => {
+            await setParams({ search: e.target.value })
+          }}
           placeholder="Search"
           className="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
         />
         <input
           type="number"
           value={params.page ?? ''}
-          onChange={(e) => setParams({ page: parseInt(e.target.value, 10) })}
+          onChange={async (e) => {
+            await setParams({ page: parseInt(e.target.value, 10) })
+          }}
           placeholder="Page"
           className="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
         />

examples/next/src/pages/index.tsx

@@ -18,14 +18,18 @@ export default function Home() {
         <input
           type="text"
           value={params.search ?? ''}
-          onChange={(e) => setParams({ search: e.target.value })}
+          onChange={async (e) => {
+            await setParams({ search: e.target.value })
+          }}
           placeholder="Search"
           className="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
         />
         <input
           type="number"
           value={params.page ?? ''}
-          onChange={(e) => setParams({ page: parseInt(e.target.value, 10) })}
+          onChange={async (e) => {
+            await setParams({ page: parseInt(e.target.value, 10) })
+          }}
           placeholder="Page"
           className="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
         />

readme.md

@@ -51,9 +51,9 @@ It requires you to have the following packages pre-installed at minimum in your
 ```
 
 > Note: It may work with older versions of the packages above too. I have personally tested it with Next 12.0.0 and it worked.
+## Features & Use Cases
 
-## Features
-
+### Core Features
 - Manage application state using URL query parameters
 - Type-safe with Zod schema validation
 - Seamless integration with Next.js Router. **Support for other routers will come soon.**
@@ -62,12 +62,10 @@ It requires you to have the following packages pre-installed at minimum in your
   - Performs shallow routing by default but this is customizable for the entire store or just on a per-use basis.
 - Server-side rendering support
   - Allows you to specify initial query values when the router itself is not ready.
-- Listens for URL updates outside of the hooks and makes sure its own stateis always up to date.
+- Listens for URL updates outside of the hooks and makes sure its own state is always up to date.
 - The library internally does shallow comparisons to prevent unnecessary re-renders.
 
-## Usage
-
-`react-url-query-parameter-store` caters to a variety of use-cases.
+### Common Use Cases
 
 1. **State Persistence**: Store application state in the URL for easy sharing and bookmarking.
 2. **User Preferences**: Manage user settings like language, theme, or view options.
@@ -85,6 +83,8 @@ It requires you to have the following packages pre-installed at minimum in your
 14. **Wizard Steps**: Track progress in multi-step processes or wizards.
 15. **Conditional Rendering**: Toggle visibility of components based on URL parameters.
 
+### Examples
+
 ```tsx
 import { z } from "zod";
 import { useRouter } from 'next/router';