Modal

• Controlled state from parent

• Uncontrolled state + Context + children as trigger implicit via ButtonContext or explicit via renderprops

• Uncontrolled state + render child function

• Function call via Context and hooks return promise

• ModalWrapper component and user imperative handler via ref

Toast

• Implicit: Custom Observer and useEffect to sync Observer state and React
• Explicit

Sync modal state and URL

We can also sync the modal state with the URL using this library. However, we need to be cautious with the history stack. For example, when we open the delete item confirmation modal, we must clean up the URL's modal state after closing it; otherwise, it could cause a bug.

export const App = () => (
  <>
    <URLModal
      modals={{
        modalWithParams: ModalWithParams,
      }}
    />
    <button
      onClick={() =>
        openModal({
          name: 'modalWithParams',
          params: {
            itemId: 'acb123',
          },
        })
      }
    >
      Open
    </button>
  </>
);

history stack

// abc.com/
// - User opens the modal
// abc.com/modal=withParams&params=JTdCJTIyc3R1ZmYlMjIlM0ElMjJIZWxsbyUyMFdvcmxkJTIyJTdE
// - User clicks the confirm button to delete the current item
// - The modal closes
// abc.com/
// - The user clicks the back button
// If we don't use history.replace to clear the previous parameters,
// the previous modal will reopen when it shouldn't.

https://github.com/remoteoss/react-url-modal