ionic-team / ionic-team/ionic-framework
feat: react, update useIonModal signature to accept all parameters in one object
- Langage dominant
- TypeScript
- Étoiles
- 52.7k
- Forks
- 13.3k
- Merge moyen
- 1 j 15 h
- PR mergées (30 j)
- 51
Description
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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 }) =>
```
### 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({ component: ReactComponentOrElement, props: T});
```
### Describe Alternatives
_No response_
### Related Code
_No response_
### Additional Information
_No response_
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Search the repository for the useIonModal hook and its current call sites to understand the existing signature and usage patterns. Review how its component and props inputs are typed and tested; done means the proposed object-based API is implemented consistently with appropriate generic prop typing and existing usage remains addressed.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react, typescript
- Domaine
- frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100