diff --git a/apps/playground/src/app/layout.tsx b/apps/playground/src/app/layout.tsx
index 3332c77..97c7456 100644
--- a/apps/playground/src/app/layout.tsx
+++ b/apps/playground/src/app/layout.tsx
@@ -2,10 +2,10 @@ import { Inter as FontSans } from "next/font/google";
import "./globals.css";
+import { Suspense } from "react";
import { Analytics } from "@/components/analytics";
import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/toaster";
-import { siteConfig } from "@/config/site";
import { cn } from "@/lib/utils";
import { Sidebar } from "./sidebar";
@@ -19,53 +19,6 @@ interface RootLayoutProps {
children: React.ReactNode;
}
-export const metadata = {
- title: {
- default: siteConfig.name,
- template: `%s | ${siteConfig.name}`,
- },
- description: siteConfig.description,
- keywords: [
- "Next.js",
- "React",
- "Tailwind CSS",
- "Server Components",
- "Radix UI",
- ],
- authors: [
- {
- name: "shadcn",
- url: "https://shadcn.com",
- },
- ],
- creator: "shadcn",
- themeColor: [
- { media: "(prefers-color-scheme: light)", color: "white" },
- { media: "(prefers-color-scheme: dark)", color: "black" },
- ],
- openGraph: {
- type: "website",
- locale: "en_US",
- url: siteConfig.url,
- title: siteConfig.name,
- description: siteConfig.description,
- siteName: siteConfig.name,
- },
- twitter: {
- card: "summary_large_image",
- title: siteConfig.name,
- description: siteConfig.description,
- images: [`${siteConfig.url}/og.jpg`],
- creator: "@shadcn",
- },
- icons: {
- icon: "/favicon.ico",
- shortcut: "/favicon-16x16.png",
- apple: "/apple-touch-icon.png",
- },
- manifest: `${siteConfig.url}/site.webmanifest`,
-};
-
export default function RootLayout({ children }: RootLayoutProps) {
return (
@@ -79,7 +32,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
- {children}
+
+ {children}
+
diff --git a/apps/playground/src/app/with-default-values/page.tsx b/apps/playground/src/app/with-default-values/page.tsx
index 2611028..bf95937 100644
--- a/apps/playground/src/app/with-default-values/page.tsx
+++ b/apps/playground/src/app/with-default-values/page.tsx
@@ -1,21 +1,31 @@
"use client";
+import { useState } from "react";
+import { useSearchParams } from "next/navigation";
import { SetKeyValueInputs } from "@/components/set-key-value-inputs";
import { Alert } from "@/components/ui/alert";
-import { useSearchParamsState } from "@use-search-params-state/next";
+import { searchParamsToObject, useObserveAndStore } from "@sp-hooks/next";
+
+const defaultValues = {
+ hello: "world",
+};
export default function Page() {
- const [state, setState] = useSearchParamsState({
- defaultValues: {
- hello: "world",
- },
- });
+ const sp = useSearchParams();
+
+ const [state, setState] = useState(
+ searchParamsToObject(sp, { defaultValues }),
+ );
+
+ useObserveAndStore(state, { defaultValues });
return (
- {'This page has a default value of "world" for the key "hello".'}
+ {
+ 'This page has a default value of "world" for the key "hello". The key/value pair is removed from URL if its set to the default value.'
+ }
diff --git a/apps/playground/src/app/with-weak-typesafety/page.tsx b/apps/playground/src/app/with-weak-typesafety/page.tsx
index e85db8b..cd5fa5f 100644
--- a/apps/playground/src/app/with-weak-typesafety/page.tsx
+++ b/apps/playground/src/app/with-weak-typesafety/page.tsx
@@ -1,25 +1,25 @@
"use client";
+import { useState } from "react";
import { SetKeyValueInputs } from "@/components/set-key-value-inputs";
import { Alert } from "@/components/ui/alert";
-import { useSearchParamsState } from "@use-search-params-state/next";
+import { SPHooksStateType, useObserveAndStore } from "@sp-hooks/next";
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-type SearchParamsType = {
+interface SearchParamsType extends SPHooksStateType {
page: string;
- search?: string;
- testArray?: string[];
-};
+ search: string;
+ testArray: string[];
+}
export default function Page() {
- const [state, setState] = useSearchParamsState
({
- defaultValues: {
- page: "1",
- },
+ const [state, setState] = useState({
+ page: "1",
+ search: "",
+ testArray: [],
});
- setState("page", "2");
+ useObserveAndStore(state);
return (
@@ -29,9 +29,7 @@ export default function Page() {
}
-
setState(k as keyof SearchParamsType, v)}
- />
+
{JSON.stringify(state, null, 2)}
>({
setState,
}: {
- setState: (key: string, value: string) => void;
+ setState: Dispatch>;
}) => {
const [key, setKey] = useState("");
const [value, setValue] = useState("");
@@ -36,7 +36,10 @@ export const SetKeyValueInputs = ({