Replace open content

Keep state inside the modal for normal UI changes. React can re-render that component without changing the stack entry.

update() is an advanced API for a value controlled outside the modal. The function comes from the handle returned by show():

const { modalID, update } = magicModal.show(() => <UploadModal progress={0} />);

await uploadFile(file, {
  onProgress(progress) {
    update(() => <UploadModal progress={progress} />);
  },
});

magicModal.hide(undefined, { modalID });

The stack entry keeps the same position, backdrop, configuration, ID, and pending promise. React receives a new component type for its content.