Generic state type parameter (#9)

* Added generic parameter for state type

* Added missing Generic type

* Added generic type parameter to the hooks and some examples

* docs(changeset): Added generic type parameter to the useSearchParamsState hooks

.changeset/tame-vans-retire.md

@@ -0,0 +1,6 @@
+---
+"@use-search-params-state/react": patch
+"@use-search-params-state/next": patch
+---
+
+Added generic type parameter to the useSearchParamsState hooks

apps/playground/src/app/page.tsx

@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";
 
 export default function IndexPage() {
-  redirect("/default");
+  redirect("/basic");
 }

apps/playground/src/app/sidebar.tsx

@@ -12,6 +12,9 @@ export const Sidebar = () => {
             With default values
           </SidebarLink>
           <SidebarLink href="/with-zod">With Zod</SidebarLink>
+          <SidebarLink href="/with-weak-typesafety">
+            With weak type safety
+          </SidebarLink>
         </ul>
       </div>
     </aside>

apps/playground/src/app/with-weak-typesafety/page.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { SetKeyValueInputs } from "@/components/set-key-value-inputs";
+import { Alert } from "@/components/ui/alert";
+
+import { useSearchParamsState } from "@use-search-params-state/next";
+
+interface SearchParamsType {
+  page: string;
+  search?: string;
+}
+
+export default function Page() {
+  const [state, setState] = useSearchParamsState<SearchParamsType>({
+    defaultValues: {
+      page: "1",
+    },
+  });
+
+  return (
+    <div>
+      <Alert>
+        {
+          "Check source code for this page. It has a generic type parameter passed to useSearchParamsState and enforces usage of the state inline with the provided type."
+        }
+      </Alert>
+
+      <SetKeyValueInputs
+        setState={(k, v) => setState(k as keyof SearchParamsType, v)}
+      />
+
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+    </div>
+  );
+}

apps/playground/src/app/with-zod/page.tsx

@@ -1,3 +1,3 @@
 export default function Page() {
-  return <div>with zod</div>;
+  return <div>TODO: with zod</div>;
 }

packages/next/src/example.tsx

@@ -0,0 +1,18 @@
+import { useSearchParamsState } from "./index";
+
+const Component = () => {
+  const [state, setState] = useSearchParamsState<{
+    greeting?: string;
+    hello: string;
+  }>();
+
+  const handleClick = () => {
+    state.greeting === "hello"
+      ? setState("greeting", "world")
+      : setState("greeting", "hello");
+  };
+
+  return <button onClick={handleClick}>{state.greeting ?? "hello"}</button>;
+};
+
+<Component />;

packages/next/src/index.ts

@@ -3,7 +3,13 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useSearchParamsState as useSearchParamsStateReact } from "@use-search-params-state/react";
 import type { UseSearchParamsStateOptions } from "@use-search-params-state/react";
 
-export const useSearchParamsState = (opts?: UseSearchParamsStateOptions) => {
+export const useSearchParamsState = <
+  State extends
+    | { [K in keyof State]: string }
+    | Record<string, string> = Record<string, string>,
+>(
+  opts?: UseSearchParamsStateOptions<State>,
+) => {
   const searchParams = useSearchParams();
   const router = useRouter();
   const pathname = usePathname();
@@ -12,7 +18,7 @@ export const useSearchParamsState = (opts?: UseSearchParamsStateOptions) => {
     router.push(pathname + "?" + newSearchParams.toString());
   };
 
-  return useSearchParamsStateReact({
+  return useSearchParamsStateReact<State>({
     searchParams,
     setSearchParams,
     ...opts,

packages/react/src/example.tsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+
+import { useSearchParamsState } from "./index";
+
+const Component1 = () => {
+  const [searchParams, setSearchParams] = useState(new URLSearchParams());
+
+  const [state, setState] = useSearchParamsState<{
+    greeting?: string;
+    hello: string;
+  }>({
+    searchParams,
+    setSearchParams: (newSearchParams) => {
+      console.log("newSearchParams", newSearchParams);
+      setSearchParams(newSearchParams);
+    },
+  });
+
+  const handleClick = () => {
+    state.greeting === "hello"
+      ? setState("greeting", "world")
+      : setState("greeting", "hello");
+  };
+
+  return <button onClick={handleClick}>{state.greeting ?? "hello"}</button>;
+};
+
+<Component1 />;
+
+const Comp2 = () => {
+  const [searchParams, setSearchParams] = useState(new URLSearchParams());
+
+  const [state, setState] = useSearchParamsState<{
+    page: string;
+    hello: string;
+  }>({
+    defaultValues: {
+      hello: "world",
+    },
+    searchParams,
+    setSearchParams: (newSearchParams) => {
+      console.log("newSearchParams", newSearchParams);
+      setSearchParams(newSearchParams);
+    },
+  });
+
+  const handleClick = () => {
+    state.page === "1" ? setState("page", "2") : setState("page", "1");
+  };
+
+  return <button onClick={handleClick}>{state.page}</button>;
+};
+
+<Comp2 />;