Update props

[sm2017]

@Quernest How can I update props?

[sm2017]

@Quernest Assume I want to create a progress dialog , or want to change of title of HelloWorldDialog

[Quernest]

@Quernest Assume I want to create a progress dialog , or want to change of title of HelloWorldDialog

If I understood the question correctly, then the answer to it is in the README. The second argument of showModal function is props.

import React from 'react';
import { useModal } from 'mui-modal-provider';

import YourProgressDialog from './YourProgressDialog.js';

export default function Blog() {
  const { showModal } = useModal();

  const handleClick = () => {
    const modal = showModal(YourProgressDialog, {
      // pass custom props here
      // ...
      value: 97,
      color: 'red',
      // ...
      onConfirm: () => modal.hide(),
      onCancel: () => modal.hide()
    });
  };

  return <button onClick={handleClick}>click</button>;
}

[sm2017]

@Quernest I asked , how can I update props, after showing modal

i.e I have a progress dialog, I show it with progress=0 as initial prop when I show modal, then I want to update progress to 10, 20 , 50, 100

How can I change props of component?
In README we have modal.hide to hide dialog
There must be something like modal.update (props)

[Quernest]

@Quernest I asked , how can I update props, after showing modal

i.e I have a progress dialog, I show it with progress=0 as initial prop when I show modal, then I want to update progress to 10, 20 , 50, 100

How can I change props of component?
In README we have modal.hide to hide dialog
There must be something like modal.update (props)

Hi @sm2017, thank you for the remark. I've added this functionality and example how use it, but I'll still consider performance improvements

[dominikkurbiel]

hey, is there any way to update modal outside open handler? Like to update modal props in useEffect in easy way - without saving modal ShowFnOutput to the state. It would be perfect to have something like this

  const { showModal, updateModal } = useModal();

  const submitMutation = useApiRequest();
  
  useEffect(() => {
    updateModal("startEventModal", {
      isLoading: submitMutation.isLoading,
      error: submitMutation.error,
    })
  }, [submitMutation.isLoading, submitMutation.error]);

  function handleOpenConfirmModal(): void {
    showModal(CommonConfirmationModal, {
      title: "Start event",
      content: "test",
      onSubmit: handleSubmit,
      isLoading: submitMutation.isLoading,
      error: submitMutation.error,
    }, {
      rootId: "startEventModal"
    });
  }

  function handleSubmit(): void {
    submitMutation.submit();
  }

[Quernest]

hey, is there any way to update modal outside open handler? Like to update modal props in useEffect in easy way - without saving modal ShowFnOutput to the state. It would be perfect to have something like this

  const { showModal, updateModal } = useModal();

  const submitMutation = useApiRequest();
  
  useEffect(() => {
    updateModal("startEventModal", {
      isLoading: submitMutation.isLoading,
      error: submitMutation.error,
    })
  }, [submitMutation.isLoading, submitMutation.error]);

  function handleOpenConfirmModal(): void {
    showModal(CommonConfirmationModal, {
      title: "Start event",
      content: "test",
      onSubmit: handleSubmit,
      isLoading: submitMutation.isLoading,
      error: submitMutation.error,
    }, {
      rootId: "startEventModal"
    });
  }

  function handleSubmit(): void {
    submitMutation.submit();
  }

Hi @dominikkurbiel

Technically yes, but to update dialog props it must be open.

For example:

  // keep your modal id here
  const modalId = useRef<null | string>(null);
  const { showModal, updateModal } = useModal();

  const submitMutation = useApiRequest();
  
  useEffect(() => {
    if (modalId.current) {
        updateModal(modalId.current, {
          isLoading: submitMutation.isLoading,
          error: submitMutation.error,
        })
    }
  }, [submitMutation.isLoading, submitMutation.error]);

  function handleOpenConfirmModal(): void {
    const modal = showModal(CommonConfirmationModal, {
      title: "Start event",
      content: "test",
      onSubmit: handleSubmit
      isLoading: submitMutation.isLoading,
      error: submitMutation.error,
      TransitionProps: {
        onExited: () => {
          // reset ref value on exited / close
          modalId.current = null;
        },
      },
    }, {
      rootId: "startEventModal"
    });

    // save modal id
    modalId.current = modal.id;
  }

  function handleSubmit(): void {
    submitMutation.submit();
  }

[samislam]

@Quernest
update modal isn't the best solution because it flashes the modal, i.e it closes and opens the modal quickly after a change.
if you have an input inside the modal that you want to track the updates on, you can't, because if you set onChange on that input, and you pressed any key on your keyboard, updateModal will close the modal and re-open it quickly, which isn't good..

I believe that the best solution is to allow us to freely pass the props inside the modal as:
showModal(<MyModalComponent prop1={myState.x} prop2 prop3="something">)
as simple as that
why it's not allowed? it makes the work a lot more complex without having this must-have feature