Skip to main content

FAQ & Troubleshooting Guide

❓ Frequently Asked Questions​

How to know if the modal is open?​

// Option 1: Property
if (MyModal.isVisible) {
  console.log('Modal is open')
}

// Option 2: Hook (inside component)
function MyComponent() {
  const { visible } = MyModal.useState()
  return <div>Modal is {visible ? 'open' : 'closed'}</div>
}

How to pass data to the modal?​

// When opening
MyModal.open({ 
  title: 'My title',
  data: { id: 1, name: 'John' }
})

// In the content
MyModal.content((props) => {
  const { title, data } = props
  return <div>{title}: {data.name}</div>
})

How to make the modal return data?​

// In modal content
MyModal.content((props) => {
  const { request } = props
  
  const save = () => {
    request.resolve({ success: true, data: {...} })
  }
  
  const cancel = () => {
    request.resolve({ success: false })
    // or: request.reject('Cancelled')
  }
  
  return (
    <div>
      <button onClick={save}>Save</button>
      <button onClick={cancel}>Cancel</button>
    </div>
  )
})

// When using
const result = await MyModal.request()
if (result.success) {
  console.log('Data saved:', result.data)
}

How to use multiple modals at the same time?​

// Modals are automatically stacked
Modal1.open()
Modal2.open() // Appears on top of Modal1
Modal3.open() // Appears on top of Modal2

// They close in order (last opened, first closed)

How to pass props?​

// Option 1: Wrapper props
MyModal.props({
  style: ['my-css-classes'],
  className: 'my-class',
  title: 'Title'
})

Can I use without TypeScript?​

Yes! All examples work in pure JavaScript. TypeScript is optional and serves to have more type safety.

How to await animations?​

await MyModal.open()
// Waits for opening animation to finish

await MyModal.close()  
// Waits for closing animation to finish

// Or manually
await MyModal.awaitTransition()

🚨 Common Issues​

Problem: Created the modal but it doesn't appear on screen.

Solutions:

  1. ✅ Check if you added <Modal.GlobalOutlet /> to your App
  2. ✅ Confirm if you defined the content: .content(() => <div>...</div>)
  3. ✅ Test if you're calling .open() correctly

Problem: Modal opens but can't close.

Solutions:

  1. ✅ Use props.toggle to close: <button onClick={toggle}>Close</button>
  2. ✅ Or call MyModal.close() directly
  3. ✅ If using .request(), call request.resolve() or request.reject()

Request never resolves​

Problem: await MyModal.request() gets stuck forever.

Solutions:

  1. ✅ Make sure to call request.resolve(value) in the modal
  2. ✅ Or call request.reject(error) if you want to cancel
  3. ✅ Check if request is not null: if (request) request.resolve(...)

TypeScript complaining about types​

Problem: Type errors in TypeScript.

Solutions:

  1. ✅ Define the types: modal<MyParams, MyResult>()
  2. ✅ Or ignore TypeScript temporarily: modal<any, any>()
  3. ✅ Use as any in extreme cases (not recommended)

📚 Quick Summary​

// 1. Create the modal
const MyModal = modal({ id: 'MY_MODAL' })
  .props({ style: ['modal'], title: 'Title' })
  .content((props) => {
    const { toggle, request, myProps } = props
    
    return (
      <div>
        <h2>Content</h2>
        <button onClick={toggle}>Close</button>
        <button onClick={() => request?.resolve('result')}>
          Confirm
        </button>
      </div>
    )
  })

// 2. Use the modal
MyModal.open({ myProps: 'value' })

// or await result
const result = await MyModal.request({ myProps: 'value' })

Main methods:

  • .open(params) - Open
  • .close() - Close
  • .toggle() - Toggle
  • .request(params) - Open and await result
  • .useState() - Hook for React
  • .props(config) - Configure wrapper

Done! Now you know how to use the modals library. Start with the simple examples and evolve as needed! 🚀