eBay / eBay/nice-modal-react

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

Open
#85 8 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.3k
Forks
127
PR merge metrics
No merged PRs in 30d

Description

@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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the TypeScript entry points mentioned in the report: useModal and NiceModal.show, using the provided ModalIWantToShow example as the starting case. Determine whether required modal props are enforced both when show() is called and when props are added later. Done means the behavior is specified and verified with a type-checking example or documented as a limitation.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.