Closed dragonfire1119 closed 9 months ago
It's maybe late, but I have the same need.
And you can do this : https://opensource.ebay.com/nice-modal-react/#promise
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.
@dragonfire1119 Hi can you please share your solution with it using the library?
@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.
you can code like this:
const modal1 = NiceModal.create(SameModal);
const modal2 = NiceModal.create(SameModal);
NiceModal.show(modal1);
NiceModal.show(modal2);
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')
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!