chore(examples): updated the example of with-react-jss to utlize the …

…App router
vercel · Dec 31, 2024 · 2a62ca9 · 2a62ca9
1 parent 2564c81
commit 2a62ca9
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 52 deletions.
diff --git a/examples/with-react-jss/app/layout.tsx b/examples/with-react-jss/app/layout.tsx
@@ -0,0 +1,15 @@
+import StyledJsxRegistry from "../lib/registry";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <StyledJsxRegistry>{children}</StyledJsxRegistry>
+      </body>
+    </html>
+  );
+}
diff --git a/examples/with-react-jss/pages/index.tsx → examples/with-react-jss/app/page.tsx b/examples/with-react-jss/pages/index.tsx → examples/with-react-jss/app/page.tsx
@@ -1,18 +1,18 @@
+"use client";
 import { createUseStyles } from "react-jss";
 
 const useStyles = createUseStyles({
   container: {
     marginTop: 100,
     textAlign: "center",
   },
-
   header: {
     fontSize: 24,
     lineHeight: 1.25,
   },
 });
 
-export default function IndexPage() {
+export default function HomePage() {
   const classes = useStyles();
 
   return (

diff --git a/examples/with-react-jss/lib/registry.tsx b/examples/with-react-jss/lib/registry.tsx
@@ -0,0 +1,26 @@
+"use client";
+import { useState, useEffect } from "react";
+import { SheetsRegistry, JssProvider, createGenerateId } from "react-jss";
+
+export default function StyledJsxRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [registry] = useState(() => new SheetsRegistry());
+  const generateId = createGenerateId();
+
+  useEffect(() => {
+    const style = document.getElementById("server-side-styles");
+    if (style && style.parentNode) {
+      style.parentNode.removeChild(style);
+    }
+  }, []);
+
+  return (
+    <JssProvider registry={registry} generateId={generateId}>
+      {children}
+      <style id="server-side-styles">{registry.toString()}</style>
+    </JssProvider>
+  );
+}
diff --git a/examples/with-react-jss/package.json b/examples/with-react-jss/package.json
@@ -7,13 +7,13 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-jss": "^10.9.2"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-jss": "^10.10.0"
   },
   "devDependencies": {
-    "@types/node": "18.7.15",
-    "@types/react": "18.2.8",
-    "typescript": "4.8.2"
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "typescript": "^5.7.2"
   }
 }
diff --git a/examples/with-react-jss/pages/_app.tsx b/examples/with-react-jss/pages/_app.tsx
diff --git a/examples/with-react-jss/pages/_document.tsx b/examples/with-react-jss/pages/_document.tsx
diff --git a/examples/with-react-jss/tsconfig.json b/examples/with-react-jss/tsconfig.json
@@ -13,8 +13,13 @@
     "module": "esnext",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }