[Question] How to make TS warn me if I forget to pass Modal's props when calling NiceModal.show()

[nik32]

@supnate so I am basically using the Use modal with the hook pattern to show the modal as follows -

import NiceModal, { useModal } from '@ebay/nice-modal-react';
import ModalIWantToShow from './ModalIWantToShow.tsx'; // created by above code

const modalIWantToShow = useModal(ModalIWantToShow);

//...
modalIWantToShow.show({ name: 'Nate' }); // show the modal
//...

Now the problem with the above is that I may forget to pass the props while calling 'show()'. Is there a way to make sure that TS warns me if I have forgot to pass the props [because the props are not optional most of the times]??

Edit - @supnate There is another big problem with this. Let's suppose we have a modal, which initially have no props to it. Now later the requirements change and we have to add props to that modal. Now in this case someone might think, that where ever I need props TS will warn and I will add the props [especially if its a big project and the modal is being used at a lot of places]. After compiling I find there are no errors and thus I move forward. But actually whereever I used the modal with hook, I am in trouble because right now it's not warning if we don't pass props. So this is not just about 'try and remember to pass the props if using show()'. This behaviour defeats the purpose of TS altogether

[innolemon]

me too ,my computer system is windows and ide is vscode

[alexandredev3]

In the latest version of the library, Typescript complains if you call the show() API and don't provide the modal required props.

[nik32]

@alexandredev3 Thanks mate!!! Really appreciate it!!

[nik32]

@alexandredev3 any chance that this kind of feature can also be added to show() method on NiceModal instance?? Basically if in a component we are calling the show method multiple times... I do something like this -

const showModal = () => {
    NiceModal.show(modalToBeShown, {
      prop1,
      prop2,
      prop3,
      prop4,
      prop5,
    });
  };

Now I would call the above function at all the multiple places where I want to show the modal. This would save the 4-5 lines the props are taking. But there is only 1 problem with this solution... you can forget to add props in NiceModal.show(). So if it doesn't take much time... can this also be solved for??

[jedusei]

@nik32 You can try this:

const showModal = () => {
  const props: MyModalProps = {
    prop1,
    prop2,
    prop3,
    prop4,
    prop5
  };

  NiceModal.show(modalToBeShown, props);
};

[nik32]

@nik32 You can try this:

const showModal = () => {
  const props: MyModalProps = {
    prop1,
    prop2,
    prop3,
    prop4,
    prop5
  };

  NiceModal.show(modalToBeShown, props);
};

@jedusei Yes I think this is manageable. @alexandredev3 yet if you think this will be a small change for you and is worth the pain you take... go ahead with it.