useRemoteTrigger
Unifies controlled and uncontrolled open state for flexible component control.
View source
It is a simple hook that allows you to control the open state of a component from a parent component or let the internal state of the component to do the work for you. I use it on every single dialog, sheet, etc component I make.
Features
- Unifies controlled and uncontrolled open state for flexible component control.
use-remote-trigger.ts
1interface UseRemoteTriggerProps {2 open?: boolean;3 onOpenChange?: (open: boolean) => void;4}5
6export interface RemoteTriggerProps extends UseRemoteTriggerProps {7 children?: React.ReactNode;8}9
10/**11 * Hook to control dialogs, sheets, and other components that can be triggered by open states or on the click of a trigger.12 */13export const useRemoteTrigger = ({14 open,15 onOpenChange,16}: UseRemoteTriggerProps) => {17 const [isOpen, setIsOpen] = useState(open ?? false);18
19 useEffect(() => {20 setIsOpen(open ?? false);21 }, [open]);22
23 const handleOpenChange = useCallback(24 (open: boolean) => {25 setIsOpen(open);26 onOpenChange?.(open);27 },28 [onOpenChange],29 );30
31 return [isOpen, handleOpenChange] as const;32};