Add useRef

Author: breadthe

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

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

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

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

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

@@ -0,0 +1,15 @@
+import React, { useRef } from 'react'
+
+export default function TextInputWithFocusButton() {
+    const inputEl = useRef(null)
+    const handleClick = () => {
+        inputEl.current.focus()
+    }
+
+    return (
+        <>
+            <input ref={inputEl} />
+            <button onClick={handleClick}>Focus the input</button>
+        </>
+    )
+}

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

@@ -0,0 +1,10 @@
+<script>
+	let inputEl
+
+	function handleClick() {
+		inputEl.focus()
+	}
+</script>
+
+<input bind:this={inputEl} />
+<button on:click={handleClick}>Focus the input</button>

src/routes/+layout.svelte

@@ -10,6 +10,7 @@
 	let tile1Url = "/useState"
 	let tile2Url = "/useEffect"
 	let tile3Url = "/useMemo"
+	let tile4Url = "/useRef"
 </script>
 
 <!-- App Shell -->
@@ -70,6 +71,14 @@
 					href={tile3Url}
 					class={tile3Url === $page.url.pathname ? "bg-primary-500" : ""}><Icon icon="code" /></AppRailTile
 				>
+				<AppRailTile
+					label="useRef"
+					title="useRef"
+					value={4}
+					tag="a"
+					href={tile4Url}
+					class={tile4Url === $page.url.pathname ? "bg-primary-500" : ""}><Icon icon="code" /></AppRailTile
+				>
 			</svelte:fragment>
 
 			<svelte:fragment slot="trail">