Hooks

The modal system provides specialized React hooks that enable seamless integration between modal state and your React components.

useState()

The primary hook for accessing the current modal state.

function MyApp() {
  const { visible, params } = UserModal.useState()
  
  return (
    <div>
      <p>Modal is {visible ? 'open' : 'closed'}</p>
      <p>Current user: {params.username}</p>
      
      <button onClick={UserModal.toggle}>
        {visible ? 'Close' : 'Open'} Modal
      </button>
    </div>
  )
}

Returns:

• visible: boolean - Modal visibility state
• params: Params - Current modal parameters

useSync(params)

Synchronizes external parameters with the modal's internal state. Useful when you need to keep the modal updated with externally changing data.

function UserProfile({ userId, userData }) {
  // Keep modal synchronized with user data
  UserModal.useSync({
    id: userId,
    name: userData.name,
    email: userData.email
  })
  
  const { visible } = UserModal.useState()
  
  return (
    <div>
      <h2>{userData.name}</h2>
      <button onClick={UserModal.open}>
        Edit Profile
      </button>
    </div>
  )
}

Parameters:

• params: Params - New parameters to synchronize

useProps(props, deps?)

Configures modal wrapper properties dynamically, with dependency control similar to useEffect.

function DynamicModal({ theme, title }) {
  const [isLoading, setIsLoading] = useState(false)
  
  // Update modal props based on component state
  ConfirmModal.useProps({
    title: isLoading ? 'Loading...' : title,
    theme: theme,
    disabled: isLoading,
    className: `modal--${theme}`,
  }, [theme, title, isLoading])
  
  return (
    <div>
      <button 
        onClick={() => ConfirmModal.open()}
        disabled={isLoading}
      >
        Confirm Action
      </button>
    </div>
  )
}

Parameters:

• props: Properties to be applied
• deps: any[] - Dependency array (optional)