feat: react, update useIonModal signature to accept all parameters in one object

[eric-horodyski]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Currently, the useIonModal hook has this signature:

const [present, dismiss] = useIonModal(component: ReactComponentOrElement, componentProps?: any);

A common React paradigm is to enclose all input parameters into one object. This is primarily done to destructure the bits of input/output that you need at any moment in time:

const { getAccount } = useAccountsAPI();

const MyComponent = ({ myProp1, myProp2 }) => <div>{myProp1}</div>;

Describe the Use Case

It's also become a pattern developers use as context clues to figure out what something does.

This can make the current useIonModal() signature confusing:

const [present, dismiss] = useIonModal(MyComponent, { myProp1, myProp2, onDismiss: dismiss() });

Describe Preferred Solution

Adjusting the signature could improve the ergonomics of the hook:

const [present, dismiss] = useIonModal({ component: ReactComponentOrElement, props?: any);

Taken further, we can use TypeScript's generics to type the component's props:

const [present, dismiss] = useIonModal<T>({ component: ReactComponentOrElement, props: T});

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[seikosantana]

I like the useIonModal<T>. Was about to propose that before i found this issue 😄