eBay
Fix the issue where some dialogs cannot be closed when using nested providers
relate issues
- #100
- #141
feature
- optimize parts of the TypeScript implementation.
- the issue of being unable to close the popup when using nested providers.
sample
Please refer to the following example. You can switch the imports to see the effects before and after the fix.
https://codesandbox.io/p/sandbox/nice-modal-sample-l4hj7d?file=%2Fsrc%2FApp.tsx%3A50%2C64
and
I tried to maintain compatibility as much as possible, so I added extra parameters to the show, hide, and remove methods to support dispatch definition.
Additionally, if you prefer not to use useModal, that's also an option.
import { show, DispatchContext } from '@ebay/nice-modal-react'
const dispatch = useContext(DispatchContext)
show(Dialog, { name: 'hello world' }, dispatch)
or
import { show, reducer, initialState, Provider } from '@ebay/nice-modal-react'
const [modals, dispatch] = useReducer(reducer, initialState)
show(Dialog, { name: 'hello world' }, dispatch)
<Provider modals={modals} dispatch={dispatch}></Provider>
Perhaps we can provide a hook to automatically bind the dispatch.
const { show, hide, remove, Provider } = useProvider()
Of course, the naming still needs consideration.
I kept the deprecated_dispatch approach for progressive enhancement, ensuring that the previous code can still run perfectly. However, I'm not sure if deprecated is the right term.
