Add useContext

Author: breadthe

src/routes/(hooks)/useContext/+page.svelte

@@ -0,0 +1,2 @@
+<script>
+</script>

src/routes/(hooks)/useContext/+page.ts

@@ -0,0 +1,9 @@
+import type { PageLoad } from "./$types"
+
+export const load = (async ({ params }) => {
+    return {
+        title: "useContext",
+        react: (await import("./react.jsx?raw")).default,
+        svelte: (await import("./svelte.svelte?raw")).default,
+    }
+}) satisfies PageLoad

src/routes/(hooks)/useContext/react.jsx

@@ -0,0 +1,23 @@
+import React, { createContext } from 'react'
+import Toolbar from './Toolbar'
+
+const themes = {
+    light: {
+        foreground: "#000000",
+        background: "#eeeeee"
+    },
+    dark: {
+        foreground: "#ffffff",
+        background: "#222222"
+    }
+}
+
+export const ThemeContext = createContext(themes.light)
+
+export default function App() {
+    return (
+        <ThemeContext.Provider value={themes.dark}>
+            <Toolbar />
+        </ThemeContext.Provider>
+    )
+}

src/routes/(hooks)/useContext/svelte.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { setContext } from "svelte"
+	import Toolbar from "./Toolbar.svelte"
+
+	const themes = {
+		light: {
+			foreground: "#000000",
+			background: "#eeeeee"
+		},
+		dark: {
+			foreground: "#ffffff",
+			background: "#222222"
+		}
+	}
+
+	setContext("ThemeContext", themes.dark)
+</script>
+
+<Toolbar />

src/routes/+layout.svelte

@@ -13,6 +13,7 @@
 	let tile4Url = "/useRef"
 	let tile5Url = "/useReducer"
 	let tile6Url = "/useCallback"
+	let tile7Url = "/useContext"
 </script>
 
 <!-- App Shell -->
@@ -97,6 +98,14 @@
 					href={tile6Url}
 					class={tile6Url === $page.url.pathname ? "bg-primary-500" : ""}><Icon icon="code" /></AppRailTile
 				>
+				<AppRailTile
+					label="useContext"
+					title="useContext"
+					value={6}
+					tag="a"
+					href={tile7Url}
+					class={tile7Url === $page.url.pathname ? "bg-primary-500" : ""}><Icon icon="code" /></AppRailTile
+				>
 			</svelte:fragment>
 
 			<svelte:fragment slot="trail">