@stevederico/skateboard-ui 2.9.5 → 2.9.8

package/App.jsx

@@ -159,15 +159,16 @@ export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRo
       <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
         <Toaster position="top-right" richColors closeButton />
         <ContextProvider constants={constants}>
-          <AuthOverlay />
           {Wrapper ? (
             <Wrapper>
               <Router>
+                <AuthOverlay />
                 <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} landingPage={landingPage} overrides={overrides} />
               </Router>
             </Wrapper>
           ) : (
             <Router>
+              <AuthOverlay />
               <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} landingPage={landingPage} overrides={overrides} />
             </Router>
           )}

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGELOG
 
+2.9.8
+
+  Add useUser hook
+  Add useDispatch hook
+  Update README Context docs
+
+2.9.7
+
+  Add useSafeNavigate hook
+  Fix Router context error in auth views
+
+2.9.6
+
+  Move AuthOverlay inside Router
+
 2.9.5
 
   Reuse SignInView in AuthOverlay

package/README.md

@@ -770,7 +770,7 @@ import ErrorBoundary from '@stevederico/skateboard-ui/ErrorBoundary';
 ## Context (State Management)
 
 ```javascript
-import { getState } from '@stevederico/skateboard-ui/Context';
+import { getState, useUser, useDispatch } from '@stevederico/skateboard-ui/Context';
 
 function MyComponent() {
   const { state, dispatch } = getState();
@@ -785,6 +785,33 @@ function MyComponent() {
 }
 ```
 
+### Optimized Hooks
+
+Use these hooks to avoid unnecessary re-renders:
+
+```javascript
+import { useUser, useDispatch } from '@stevederico/skateboard-ui/Context';
+
+// Only re-renders when user changes (not on sidebar/theme changes)
+function ProfileCard() {
+  const user = useUser();
+  if (!user) return null;
+  return <div>{user.name}</div>;
+}
+
+// Stable dispatch reference, never causes re-renders
+function SignOutButton() {
+  const dispatch = useDispatch();
+  return <button onClick={() => dispatch({ type: 'CLEAR_USER' })}>Sign Out</button>;
+}
+```
+
+| Hook | Returns | Re-renders on |
+|------|---------|---------------|
+| `getState()` | `{ state, dispatch }` | Any state change |
+| `useUser()` | `user` or `null` | User changes only |
+| `useDispatch()` | `dispatch` | Never (stable) |
+
 ### State Shape
 
 ```javascript

package/core/Context.jsx

@@ -206,3 +206,46 @@ export function ContextProvider({ children, constants }) {
 export function getState() {
   return useContext(context);
 }
+
+/**
+ * Hook to access only the current user.
+ *
+ * More efficient than getState() when you only need user data,
+ * as it avoids re-renders from unrelated state changes.
+ *
+ * @returns {Object|null} Current user object or null if not authenticated
+ *
+ * @example
+ * import { useUser } from '@stevederico/skateboard-ui/Context';
+ *
+ * function ProfileCard() {
+ *   const user = useUser();
+ *   if (!user) return null;
+ *   return <div>{user.name}</div>;
+ * }
+ */
+export function useUser() {
+  const { state } = useContext(context);
+  return state.user;
+}
+
+/**
+ * Hook to access dispatch function.
+ *
+ * Use when you only need to dispatch actions without reading state.
+ * Avoids re-renders since dispatch is stable.
+ *
+ * @returns {Function} Dispatch function
+ *
+ * @example
+ * import { useDispatch } from '@stevederico/skateboard-ui/Context';
+ *
+ * function SignOutButton() {
+ *   const dispatch = useDispatch();
+ *   return <button onClick={() => dispatch({ type: 'CLEAR_USER' })}>Sign Out</button>;
+ * }
+ */
+export function useDispatch() {
+  const { dispatch } = useContext(context);
+  return dispatch;
+}

package/core/Utilities.js

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useContext } from 'react';
+import { UNSAFE_NavigationContext } from 'react-router-dom';
 import { getDispatch } from './Context.jsx';
 
 // Constants will be initialized by the app shell
@@ -985,3 +986,33 @@ export function setUIVisibility({ sidebar, tabBar }) {
         console.warn('setUIVisibility: Context not initialized');
     }
 }
+
+/**
+ * Safe navigation hook that works with or without Router context.
+ *
+ * Uses UNSAFE_NavigationContext directly instead of useNavigate() to avoid
+ * throwing when rendered outside Router (e.g., in Portals or module duplication).
+ * Falls back to window.location.href if no Router context is available.
+ *
+ * @returns {function} Navigate function (path, options?) => void
+ *
+ * @example
+ * const navigate = useSafeNavigate();
+ * navigate('/app');
+ * navigate('/app', { replace: true });
+ */
+export function useSafeNavigate() {
+    const ctx = useContext(UNSAFE_NavigationContext);
+
+    if (!ctx) {
+        return (path) => { window.location.href = path; };
+    }
+
+    return (path, options = {}) => {
+        if (options.replace) {
+            ctx.navigator.replace(path, options.state);
+        } else {
+            ctx.navigator.push(path, options.state);
+        }
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "2.9.5",
+  "version": "2.9.8",
   "type": "module",
   "exports": {
     "./Sidebar": {

package/views/SignInView.jsx

@@ -6,9 +6,8 @@ import { Label } from "../shadcn/ui/label"
 import { Card, CardContent, CardHeader } from "../shadcn/ui/card"
 import { Alert, AlertDescription } from "../shadcn/ui/alert"
 import DynamicIcon from '../core/DynamicIcon';
-import { useNavigate } from 'react-router-dom';
 import { getState } from "../core/Context.jsx";
-import { getBackendURL } from '../core/Utilities'
+import { getBackendURL, useSafeNavigate } from '../core/Utilities'
 
 /**
  * Sign-in form component.
@@ -43,7 +42,7 @@ export default function LoginForm({
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const navigate = useNavigate();
+  const navigate = useSafeNavigate();
   const emailInputRef = useRef(null);
 
   const [errorMessage, setErrorMessage] = useState('')

package/views/SignUpView.jsx

@@ -6,9 +6,8 @@ import { Label } from "../shadcn/ui/label"
 import { Card, CardContent, CardHeader } from "../shadcn/ui/card"
 import { Alert, AlertDescription } from "../shadcn/ui/alert"
 import DynamicIcon from '../core/DynamicIcon';
-import { useNavigate } from 'react-router-dom';
 import { getState } from "../core/Context.jsx";
-import { getBackendURL } from '../core/Utilities'
+import { getBackendURL, useSafeNavigate } from '../core/Utilities'
 
 /**
  * Sign-up form component.
@@ -44,8 +43,8 @@ export default function LoginForm({
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [name, setName] = useState('');
-  const navigate = useNavigate();
-  const [errorMessage, setErrorMessage] = useState('')
+  const [errorMessage, setErrorMessage] = useState('');
+  const navigate = useSafeNavigate();
   const nameInputRef = useRef(null);
 
   // Focus the first input on mount