Skip to content

Add magicModal.update() method for dynamic content updates #158

@JoinChang

Description

@JoinChang

Currently, when a modal is shown using magicModal.show(), there's no built-in way to update the modal's content without hiding and re-showing it.

Add a new magicModal.update() method that allows updating the content of an existing modal:

const { modalID } = magicModal.show(() => (
  <MyModalContent data={initialData} />
));

magicModal.update({
  modalID,
  render: () => <MyModalContent data={updatedData} />
});

Alternatively, the show() method could return an update() function:

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

// Later
update(() => <MyModal data={newData} />);

Currently, my solution is:

// In content component
const [data, setData] = useState(initialData);
const dataRef = useRef(setData);

useEffect(() => {
  onDataUpdate?.(setData);
}, [onDataUpdate]);

// In parent
const setDataRef = useRef(null);

magicModal.show(() => (
  <MyModalContent 
    data={data}
    onDataUpdate={(setter) => {
      setDataRef.current = setter;
    }}
  />
));

// Update
useEffect(() => {
  setDataRef.current?.(newData);
}, [newData]);

Not sure if adapting this feature would be convenient for the existing code, but it would be great if it is.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions