Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Request] Improve typing of modal props #134

Open
gprst opened this issue Oct 26, 2023 · 2 comments
Open

[Request] Improve typing of modal props #134

gprst opened this issue Oct 26, 2023 · 2 comments

Comments

@gprst
Copy link

gprst commented Oct 26, 2023

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
Copy link

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

@baxxos
Copy link

baxxos commented Jan 25, 2024

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants