eBay / nice-modal-react

A modal state manager for React.
https://ebay.github.io/nice-modal-react
MIT License
1.96k stars 109 forks source link

[Request] Improve typing of modal props #134

Open gprst opened 8 months ago

gprst commented 8 months ago

It seems not to be possible to call NiceModal.show with a strong typing of the called modal props.

Let's say that MyModal has the following props:

type Props = {
  onSubmit: () => void;
  name: string;
};

Then:

import NiceModal from '@ebay/nice-modal-react';
import MyModal from './components/MyModal';

const App = () => {
  const onClick = () => NiceModal.show(MyModal, {
    something: '123', // No error, even though `MyModal` doesn't have a `something` prop
    name: '456',
  }); // No error, even though prop `onSubmit` hasn't been provided

  return <button onClick={onClick}>Show modal</button>;
};

It would be nice to have errors when the provided object doesn't match the type of the modal props 🙂

jludwiggreenaction commented 7 months ago

If it isn't to automatically generate the type, we should probably be able to pass it as a simple generic parameter right?

baxxos commented 5 months ago

If it isn't to automatically generate the type, we should probably be able to pass it as a simple generic parameter right?

I wonder if we could get around this by simply overriding the NiceModal.show() function. I haven't used the library yet (I'm just considering it), however I imagine we should be able to do something like this?

const originalShow = NiceModal.show
NiceModal.show = <T>(modal: T, props: React.ComponentProps<T>, ...args) => originalShow(modal, props, ...args)