Demo Page 2

Playground & Context State

Test global React Context, toast feedback, and view developer integration patterns.

React 18 Context

Global React Context

AppContext

State accessible by any client component without prop-drilling

Shared Counter

Notification Count

3 alerts in state

Theme StateActive: dark

Toast Notifications

react-hot-toast

Mounts once in RootLayout and callable from any client handler

Toast Architecture

Toasts are mounted at components/Providers.tsx. Import toast from react-hot-toast anywhere to trigger instant non-blocking user feedback.

Starter Reference Snippets

Ready-to-use patterns for your own routes and components

// In any Client Component:
import { useApp, useTheme } from "@/context";

export function CounterWidget() {
  const { demoCounter, incrementCounter } = useApp();
  const { resolvedTheme, toggleTheme } = useTheme();

  return (
    <div>
      <p>Theme: {resolvedTheme}</p>
      <p>Counter: {demoCounter}</p>
      <button onClick={incrementCounter}>+1 Global</button>
    </div>
  );
}