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
1import { useCallback, useEffect, useState } from 'react';2
3interface UseRemoteTriggerProps {4 open?: boolean;5 onOpenChange?: (open: boolean) => void;6}7
8export interface RemoteTriggerProps extends UseRemoteTriggerProps {9 children?: React.ReactNode;10}11
12/**13 * Hook to control dialogs, sheets, and other components that can be triggered by open states or on the click of a trigger.14 */15export const useRemoteTrigger = ({16 open,17 onOpenChange,18}: UseRemoteTriggerProps) => {19 const [isOpen, setIsOpen] = useState(open ?? false);20
21 useEffect(() => {22 setIsOpen(open ?? false);23 }, [open]);24
25 const handleOpenChange = useCallback(26 (open: boolean) => {27 setIsOpen(open);28 onOpenChange?.(open);29 },30 [onOpenChange],31 );32
33 return [isOpen, handleOpenChange] as const;34};