Overlapping the same modal

[dragonfire1119]

I was wondering if there was a way to overlap the same modal over each other? I don't see a way to give the same modal a unique id?

Like a group stack of modals that you can close one by one or all at once.

ExampleModal > ExampleModal > ExampleModal

Thanks for this awesome lib!

[youf-olivier]

It's maybe late, but I have the same need.

And you can do this : https://opensource.ebay.com/nice-modal-react/#promise

[dragonfire1119]

It's maybe late, but I have the same need.

And you can do this : https://opensource.ebay.com/nice-modal-react/#promise

Yes, I noticed that, but it didn't work since I needed the user to be able to click and return to the previous modal-like pages. Finally, I created my own solution.

[Yedidyar]

@dragonfire1119 Hi can you please share your solution with it using the library?

[dragonfire1119]

@dragonfire1119 Hi can you please share your solution with it using the library?

I no longer use nice-modal-react because it lacked the features I required, so I created my own solution. I don't have a solution for this library.

[HiChen404]

you can code like this:

const modal1 = NiceModal.create(SameModal);
const modal2 = NiceModal.create(SameModal);

NiceModal.show(modal1);
NiceModal.show(modal2);

[IVLIU]

You can encapsulate it like this

import NiceModal from '@ebay/nice-modal-react'
import type { FC } from 'react'

export const createNiceModal = <P extends {}>(component: FC<P>) => {
  const Dialog = NiceModal.create<P>(component);
  
  return (modalId: string) => {
    NiceModal.register(modalId, Dialog)

    const create = (props: P = {} as P) => NiceModal.show(modalId, props)

    const hide = () => NiceModal.hide(modalId)

    const remove = () => NiceModal.remove(modalId)

    return {
      create,
      hide,
      remove,
    }
  }
}

use

const modalFactory = createNiceModal(
  () => {
    // modal
    const { visible, remove, resolve } = useModal()
    // form
    const [form] = useForm()
  
    return (
      <Modal title="登录" open={visible} onCancel={remove} onOk={form.submit}>
        <Form form={form} onFinish={resolve}>
          <FormItem name="username" label="用户名">
            <Input placeholder="请输入密码" />
          </FormItem>
          <FormItem name="password" label="密码">
            <Password placeholder="请输入密码" />
          </FormItem>
        </Form>
      </Modal>
    )
  }
)

export const LoginModal = modalFactory('login')

export const registerModal = modalFactory('register')