From 7acddbf274c775592f0c63b9949c73df3130770d Mon Sep 17 00:00:00 2001
From: Severin Ibarluzea <seve700@gmail.com>
Date: Mon, 20 Oct 2025 18:53:16 -0700
Subject: [PATCH 1/3] Add CircuitPreview example to context guide

---
 ...g-react-context-to-avoid-prop-drilling.mdx | 101 +++++++++++++++---
 1 file changed, 87 insertions(+), 14 deletions(-)

diff --git a/docs/guides/typescript-guide/using-react-context-to-avoid-prop-drilling.mdx b/docs/guides/typescript-guide/using-react-context-to-avoid-prop-drilling.mdx
index 1bbb680..ecbc350 100644
--- a/docs/guides/typescript-guide/using-react-context-to-avoid-prop-drilling.mdx
+++ b/docs/guides/typescript-guide/using-react-context-to-avoid-prop-drilling.mdx
@@ -121,20 +121,6 @@ export const InstrumentPanel = () => (
 
 Because every component inside the provider shares the same context, you can introduce additional consumers (for example, status displays or documentation overlays) without modifying intermediate components.
 
-## Testing Context Consumers
-
-When unit testing components that depend on the context, render them with the provider to supply the necessary data. Libraries like [`@testing-library/react`](https://testing-library.com/docs/react-testing-library/intro/) make this pattern straightforward:
-
-```tsx
-render(
-  <BoardSettingsProvider value={mockSettings}>
-    <ResistorList names={["R10"]} />
-  </BoardSettingsProvider>
-)
-```
-
-This keeps tests realistic while preserving the benefits of type safety.
-
 ## Key Takeaways
 
 - Define a context value type that captures the shared configuration.
@@ -143,3 +129,90 @@ This keeps tests realistic while preserving the benefits of type safety.
 - Wrap only the subtree that needs the shared data, keeping providers focused and intentional.
 
 With these patterns, React Context becomes a reliable way to manage shared state in your TypeScript tscircuit projects without the noise of prop drilling.
+
+<CircuitPreview
+  hide3DTab
+  hidePCBTab
+  defaultView="schematic"
+  code={`import { ReactNode, createContext, useContext, useMemo } from "react"
+
+type BoardSettings = {
+  boardName: string
+  boardSize: { width: number; height: number }
+  defaultFootprints: {
+    resistor: string
+    capacitor: string
+  }
+}
+
+const BoardSettingsContext = createContext<BoardSettings | null>(null)
+
+const BoardSettingsProvider = ({
+  children,
+  value,
+}: {
+  children: ReactNode
+  value: BoardSettings
+}) => {
+  const memoizedValue = useMemo(() => value, [value])
+
+  return (
+    <BoardSettingsContext.Provider value={memoizedValue}>
+      {children}
+    </BoardSettingsContext.Provider>
+  )
+}
+
+const useBoardSettings = () => {
+  const context = useContext(BoardSettingsContext)
+
+  if (!context) {
+    throw new Error("useBoardSettings must be used within a BoardSettingsProvider")
+  }
+
+  return context
+}
+
+const ResistorList = ({ names }: { names: string[] }) => {
+  const {
+    defaultFootprints: { resistor },
+  } = useBoardSettings()
+
+  return (
+    <group name="Resistors">
+      {names.map((name) => (
+        <resistor key={name} name={name} footprint={resistor} resistance="1k" />
+      ))}
+    </group>
+  )
+}
+
+const DecouplingCapacitor = ({ name }: { name: string }) => {
+  const {
+    defaultFootprints: { capacitor },
+  } = useBoardSettings()
+
+  return (
+    <capacitor name={name} capacitance="10n" footprint={capacitor} />
+  )
+}
+
+export default () => (
+  <BoardSettingsProvider
+    value={{
+      boardName: "Instrumentation Panel",
+      boardSize: { width: 50, height: 40 },
+      defaultFootprints: {
+        resistor: "0402",
+        capacitor: "0603",
+      },
+    }}
+  >
+    <board width="50mm" height="40mm" name="InstrumentPanel">
+      <ResistorList names={["R1", "R2", "R3"]} />
+      <DecouplingCapacitor name="C1" />
+    </board>
+  </BoardSettingsProvider>
+)
+`}
+/>

From 8e54730cdbc06d9206b0323d97213e4b2b7db6fa Mon Sep 17 00:00:00 2001
From: Severin Ibarluzea <seve700@gmail.com>
Date: Mon, 20 Oct 2025 19:58:45 -0700
Subject: [PATCH 2/3] Fix CircuitPreview example export

---
 ...g-react-context-to-avoid-prop-drilling.mdx | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/docs/guides/typescript-guide/using-react-context-to-avoid-prop-drilling.mdx b/docs/guides/typescript-guide/using-react-context-to-avoid-prop-drilling.mdx
index ecbc350..e97ffad 100644
--- a/docs/guides/typescript-guide/using-react-context-to-avoid-prop-drilling.mdx
+++ b/docs/guides/typescript-guide/using-react-context-to-avoid-prop-drilling.mdx
@@ -192,27 +192,27 @@ const DecouplingCapacitor = ({ name }: { name: string }) => {
     defaultFootprints: { capacitor },
   } = useBoardSettings()
 
+  return <capacitor name={name} capacitance="10n" footprint={capacitor} />
+}
+
+export default function InstrumentPanel() {
   return (
-    <capacitor name={name} capacitance="10n" footprint={capacitor} />
+    <BoardSettingsProvider
+      value={{
+        boardName: "Instrumentation Panel",
+        boardSize: { width: 50, height: 40 },
+        defaultFootprints: {
+          resistor: "0402",
+          capacitor: "0603",
+        },
+      }}
+    >
+      <board width="50mm" height="40mm" name="InstrumentPanel">
+        <ResistorList names={["R1", "R2", "R3"]} />
+        <DecouplingCapacitor name="C1" />
+      </board>
+    </BoardSettingsProvider>
   )
 }
-
-export default () => (
-  <BoardSettingsProvider
-    value={{
-      boardName: "Instrumentation Panel",
-      boardSize: { width: 50, height: 40 },
-      defaultFootprints: {
-        resistor: "0402",
-        capacitor: "0603",
-      },
-    }}
-  >
-    <board width="50mm" height="40mm" name="InstrumentPanel">
-      <ResistorList names={["R1", "R2", "R3"]} />
-      <DecouplingCapacitor name="C1" />
-    </board>
-  </BoardSettingsProvider>
-)
 `}
 />

From 770d51a0542cbe6824d7cee753345ce2b977f1fc Mon Sep 17 00:00:00 2001
From: Severin Ibarluzea <seve700@gmail.com>
Date: Mon, 20 Oct 2025 22:03:15 -0700
Subject: [PATCH 3/3] Import CircuitPreview in React context guide

---
 .../using-react-context-to-avoid-prop-drilling.mdx              | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/guides/typescript-guide/using-react-context-to-avoid-prop-drilling.mdx b/docs/guides/typescript-guide/using-react-context-to-avoid-prop-drilling.mdx
index e97ffad..136f221 100644
--- a/docs/guides/typescript-guide/using-react-context-to-avoid-prop-drilling.mdx
+++ b/docs/guides/typescript-guide/using-react-context-to-avoid-prop-drilling.mdx
@@ -2,6 +2,8 @@
 title: Using React Context to Avoid Prop-Drilling
 ---
 
+import CircuitPreview from "@site/src/components/CircuitPreview"
+
 React Context is a powerful tool for sharing data across deeply nested components without having to pass props through every level of the tree. When building TypeScript-powered circuit design tools, context lets you centralize configuration and provide well-typed data to any component that needs it.
 
 ## When to use React Context