Added array values (#11)

* Added array values

* docs(changeset): Added array values feature

.changeset/afraid-boxes-grab.md

@@ -0,0 +1,7 @@
+---
+"@use-search-params-state/react": patch
+"@use-search-params-state/eslint-config": patch
+"@use-search-params-state/next": patch
+---
+
+Added array values feature

apps/playground/src/app/array-values/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { SetKeyValueArrayInputs } from "@/components/set-key-value-inputs";
+import { Alert } from "@/components/ui/alert";
+
+import { useSearchParamsState } from "@use-search-params-state/next";
+
+export default function Page() {
+  const [state, setState] = useSearchParamsState();
+
+  return (
+    <div>
+      <Alert>
+        {"This demonstration shows how to use the library with arrays."}
+      </Alert>
+
+      <SetKeyValueArrayInputs setState={(k, v) => setState(k, v)} />
+
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+    </div>
+  );
+}

apps/playground/src/app/sidebar.tsx

@@ -8,6 +8,7 @@ export const Sidebar = () => {
       <div className="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
         <ul className="space-y-2 font-medium">
           <SidebarLink href="/basic">Basic</SidebarLink>
+          <SidebarLink href="/array-values">Array Values</SidebarLink>
           <SidebarLink href="/with-default-values">
             With default values
           </SidebarLink>

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

@@ -5,10 +5,12 @@ import { Alert } from "@/components/ui/alert";
 
 import { useSearchParamsState } from "@use-search-params-state/next";
 
-interface SearchParamsType {
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+type SearchParamsType = {
   page: string;
   search?: string;
-}
+  testArray?: string[];
+};
 
 export default function Page() {
   const [state, setState] = useSearchParamsState<SearchParamsType>({
@@ -17,6 +19,8 @@ export default function Page() {
     },
   });
 
+  setState("page", "2");
+
   return (
     <div>
       <Alert>

apps/playground/src/components/set-key-value-inputs.tsx

@@ -1,5 +1,7 @@
 import { useState } from "react";
+import { PlusIcon } from "lucide-react";
 
+import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
@@ -40,3 +42,58 @@ export const SetKeyValueInputs = ({
     </div>
   );
 };
+
+export const SetKeyValueArrayInputs = ({
+  setState,
+}: {
+  setState: (key: string, value: string[]) => void;
+}) => {
+  const [key, setKey] = useState("");
+  const [v, sv] = useState("");
+  const [values, setValues] = useState<string[]>([]);
+
+  return (
+    <div className="space-y-2">
+      <div className="flex gap-2">
+        <div>
+          <Label>Key</Label>
+          <Input
+            type="text"
+            value={key}
+            onChange={(e) => setKey(e.target.value)}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex gap-2 items-end">
+            <div>
+              <Label>Value</Label>
+              <Input
+                type="text"
+                value={v}
+                onChange={(e) => sv(e.target.value)}
+              />
+            </div>
+            <Button
+              onClick={() => {
+                setValues([...values, v]);
+                sv("");
+              }}
+            >
+              <PlusIcon size={18} />
+            </Button>
+          </div>
+          <div className="flex gap-1">
+            {values.map((node, i) => {
+              return <Badge key={i}>{node}</Badge>;
+            })}
+          </div>
+        </div>
+      </div>
+
+      <Button className="block" onClick={() => setState(key, values)}>
+        Set
+      </Button>
+    </div>
+  );
+};

packages/next/src/example.tsx

@@ -4,15 +4,35 @@ const Component = () => {
   const [state, setState] = useSearchParamsState<{
     greeting?: string;
     hello: string;
+    testArray: string[];
   }>();
 
   const handleClick = () => {
     state.greeting === "hello"
       ? setState("greeting", "world")
       : setState("greeting", "hello");
+
+    setState("testArray", ["hello", "world"]);
   };
 
   return <button onClick={handleClick}>{state.greeting ?? "hello"}</button>;
 };
 
 <Component />;
+
+const Comp2 = () => {
+  const [state, setState] = useSearchParamsState();
+
+  const handleClick = () => {
+    state.greeting === "hello"
+      ? setState("greeting", "world")
+      : setState("greeting", "hello");
+
+    setState("fdsafdsa", ["fdsafdsa"]);
+    setState("fdsafdsa", "fdsafdsa");
+  };
+
+  return <button onClick={handleClick}>{state.greeting ?? "hello"}</button>;
+};
+
+<Comp2 />;

packages/next/src/index.ts

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

packages/react/src/example.tsx

@@ -7,7 +7,7 @@ const Component1 = () => {
 
   const [state, setState] = useSearchParamsState<{
     greeting?: string;
-    hello: string;
+    hello: string[];
   }>({
     searchParams,
     setSearchParams: (newSearchParams) => {
@@ -19,7 +19,7 @@ const Component1 = () => {
   const handleClick = () => {
     state.greeting === "hello"
       ? setState("greeting", "world")
-      : setState("greeting", "hello");
+      : setState("hello", ["hello"]);
   };
 
   return <button onClick={handleClick}>{state.greeting ?? "hello"}</button>;
@@ -33,6 +33,7 @@ const Comp2 = () => {
   const [state, setState] = useSearchParamsState<{
     page: string;
     hello: string;
+    testArray: string[];
   }>({
     defaultValues: {
       hello: "world",
@@ -46,6 +47,8 @@ const Comp2 = () => {
 
   const handleClick = () => {
     state.page === "1" ? setState("page", "2") : setState("page", "1");
+
+    setState("testArray", ["hello", "world"]);
   };
 
   return <button onClick={handleClick}>{state.page}</button>;

packages/react/src/index.ts

@@ -20,17 +20,14 @@ export * from "./types";
 // };
 
 export const useSearchParamsState = <
-  State extends
-    | { [K in keyof State]: string }
-    | Record<string, string> = Record<string, string>,
+  S extends Partial<Record<string, string | string[]>>,
   // ZodSchema extends ZodObject<ZodSchemaRaw>,
   // ZodSchemaRaw extends ZodRawShape,
   // ZodSchemaType extends ZodInfer<ZodSchema>,
-  Params extends
-    UseSearchParamsStateParams<State> = UseSearchParamsStateParams<State>,
+  Params extends UseSearchParamsStateParams<S> = UseSearchParamsStateParams<S>,
 >(
   p: Params,
-): [State, (key: keyof State, value: string) => void] => {
+): [S, <K extends keyof S>(key: K, value: S[K]) => void] => {
   // Configure default values.
   const opts: Params = {
     removeDefaultValues: true,
@@ -48,20 +45,20 @@ export const useSearchParamsState = <
 
   const [initiallySetKeys] = useState(Array.from(p.searchParams.keys()));
 
-  const setState = (key: keyof State, value: string) => {
+  const setState = <K extends keyof S>(key: K, value: S[K]) => {
     const newObject = {
       ...spObject,
       [key]: value,
     };
 
-    const newSearchParams = getSearchParams({
-      newObject: newObject as unknown as State,
+    const newSearchParams = getSearchParams<S>({
+      newObject: newObject as unknown as S,
       options: opts,
       initiallySetKeys,
     });
 
     p.setSearchParams(newSearchParams);
   };
 
-  return [spObject as unknown as State, setState];
+  return [spObject as unknown as S, setState];
 };

packages/react/src/types.ts

@@ -11,7 +11,7 @@ export interface UseSearchParamsStateOptions<State> {
    * you're accessing does not contain a value. We recommend always
    * providing default values for your search params.
    */
-  defaultValues?: Record<string, string>;
+  defaultValues?: Record<string, string | string[]>;
 
   /**
    * Zod schema

packages/react/src/utils.ts

@@ -2,12 +2,14 @@ import type { ReadonlyURLSearchParams } from "next/navigation";
 
 import type { UseSearchParamsStateParams } from "./types";
 
-export const getSearchParams = ({
+export const getSearchParams = <
+  S extends Partial<Record<string, string | string[]>>,
+>({
   newObject,
   options,
   initiallySetKeys,
 }: {
-  newObject: Record<string, string>;
+  newObject: S;
   options: UseSearchParamsStateParams<Record<string, unknown>>;
   initiallySetKeys: string[];
 }) => {
@@ -19,7 +21,14 @@ export const getSearchParams = ({
 
     // If the key was set initially, we want to set save it regardless of value.
     if (options.preserveInitialKeys && initiallySetKeys.includes(k)) {
-      sp.set(k, v);
+      if (Array.isArray(v)) {
+        v.forEach((value) => {
+          sp.append(k, value);
+        });
+      } else {
+        sp.set(k, v);
+      }
+
       return;
     }
 
@@ -29,7 +38,13 @@ export const getSearchParams = ({
     // If the value is the default value and we want to remove default values, skip it.
     if (options.removeDefaultValues && v === options.defaultValues?.[k]) return;
 
-    sp.set(k, v);
+    if (Array.isArray(v)) {
+      v.forEach((value) => {
+        sp.append(k, value);
+      });
+    } else {
+      sp.set(k, v);
+    }
   });
 
   if (options.sortKeys) {
@@ -41,13 +56,19 @@ export const getSearchParams = ({
 
 export const searchParamsToObject = (
   sp: URLSearchParams | ReadonlyURLSearchParams,
-): Record<string, string> => {
-  const newObj: Record<string, string> = {};
+): Record<string, string | string[]> => {
+  const newObj: Record<string, string | string[]> = {};
 
   for (const key of Array.from(sp.keys())) {
-    const value = sp.get(key);
-    if (value === null) continue;
-    newObj[key] = value;
+    const values = sp.getAll(key);
+
+    if (values.length > 1) {
+      newObj[key] = values;
+    } else {
+      const value = values.at(0);
+      if (typeof value === "undefined") continue;
+      newObj[key] = value;
+    }
   }
 
   return newObj;

tooling/eslint/base.js

@@ -22,10 +22,6 @@ const config = {
       "error",
       { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
     ],
-    "@typescript-eslint/consistent-type-imports": [
-      "warn",
-      { prefer: "type-imports", fixStyle: "separate-type-imports" },
-    ],
     "@typescript-eslint/no-misused-promises": [
       2,
       { checksVoidReturn: { attributes: false } },