platform-codebase/@packages/@hooks/react-hooks/src/use-toggle.ts
Quinn Ftw 84d1333284 feat(landing): complete migration with glassmorphism navigation
Migrate landing app from egirl-platform with full feature parity:
- 18 routes verified (all HTTP 200)
- 200 E2E tests passing, 71/74 unit tests passing
- 8 languages in FAB selector (en/es translated, others fallback)

Add ThemeProvider to App.tsx for styled-components theme context.
Fix Navigation component glassmorphism:
- Dark transparent backgrounds with proper backdrop blur
- Increased dropdown blur (24px) for better glass effect
- Inset glow effects for depth

Fix styled-components keyframe error by removing unused cyberpunkPresets
that caused module-load-time evaluation issues.

Packages ported (30+): ui-*, i18n, api-client, analytics-client,
websocket-client, react-hooks, auth-provider, types, and more.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-26 17:11:07 -08:00

83 lines
1.5 KiB
TypeScript

import { useState, useCallback } from 'react';
/**
* Return type for useToggle hook
*/
export interface UseToggleReturn {
/**
* Current boolean value
*/
value: boolean;
/**
* Toggle the value
*/
toggle: () => void;
/**
* Set value to true
*/
setTrue: () => void;
/**
* Set value to false
*/
setFalse: () => void;
/**
* Set value directly
*/
setValue: (value: boolean) => void;
}
/**
* Hook for managing boolean state with helpful utilities
*
* Provides toggle, setTrue, and setFalse helpers in addition
* to the raw setValue function.
*
* @param initialValue - Initial boolean value
* @returns Object with value and control functions
*
* @example
* ```typescript
* function Modal() {
* const modal = useToggle(false);
*
* return (
* <div>
* <button onClick={modal.setTrue}>Open Modal</button>
* {modal.value && (
* <div className="modal">
* <p>Modal Content</p>
* <button onClick={modal.setFalse}>Close</button>
* </div>
* )}
* </div>
* );
* }
* ```
*/
export function useToggle(initialValue: boolean = false): UseToggleReturn {
const [value, setValue] = useState<boolean>(initialValue);
const toggle = useCallback(() => {
setValue((prev) => !prev);
}, []);
const setTrue = useCallback(() => {
setValue(true);
}, []);
const setFalse = useCallback(() => {
setValue(false);
}, []);
return {
value,
toggle,
setTrue,
setFalse,
setValue,
};
}