Skip to content

feat(react): add generic type parameter to useIonModal and useIonPopover#31182

Open
EduardF1 wants to merge 1 commit into
ionic-team:mainfrom
EduardF1:feat/typed-useionmodal-useionpopover
Open

feat(react): add generic type parameter to useIonModal and useIonPopover#31182
EduardF1 wants to merge 1 commit into
ionic-team:mainfrom
EduardF1:feat/typed-useionmodal-useionpopover

Conversation

@EduardF1
Copy link
Copy Markdown

Summary

Adds generic type parameters to useIonModal and useIonPopover so TypeScript can infer the correct type for componentProps based on the component argument.

Motivation

Currently both hooks accept componentProps?: any, providing no type safety. This causes undetected typos in prop names and incorrect types at compile time.

Changes

  • useIonModal and useIonPopover now have two overloaded signatures:
    1. When a React.ComponentClass<T> or React.FC<T> is passed, componentProps is typed as T
    2. When a JSX.Element is passed, componentProps remains any
  • The implementation signature remains (component: ReactComponentOrElement, componentProps?: any) for backward compatibility
  • The // TODO(FW-2959): types comment is removed as this resolves that TODO
  • Default type parameter is Record<string, any> to preserve backward compatibility when no generic is specified

Testing

No runtime behavior changes — this is a type-only change. Existing tests should continue to pass.

Closes #28680

Add overloaded function signatures to useIonModal and useIonPopover so
that TypeScript can infer componentProps type from the component argument.
When a React ComponentClass or FC is provided, componentProps is typed as
that component's props type (P). When a JSX.Element is passed, any is used
to preserve existing behaviour. The default for P remains any to avoid
breaking changes.

Resolves ionic-team#28680

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@EduardF1 EduardF1 requested a review from a team as a code owner May 30, 2026 00:15
@EduardF1 EduardF1 requested a review from thetaPC May 30, 2026 00:15
@github-actions github-actions Bot added the package: react @ionic/react package label May 30, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented May 30, 2026

@EduardF1 is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

@EduardF1
Copy link
Copy Markdown
Author

It looks like the only failing check here is the Vercel preview deployment (Authorization required to deploy), which is expected for external contributors who do not have access to the Ionic Vercel team/deploy token.

All other current CI checks are passing. A maintainer can re-run/authorize the Vercel deployment if needed, or treat this preview check as non-blocking / not required for merge.

@EduardF1
Copy link
Copy Markdown
Author

Quick follow-up: I do not see any maintainer reply yet. From my side this still looks ready apart from the Vercel authorization gate, which external contributors cannot unblock directly. Happy to address any code feedback once someone has a chance to review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: react @ionic/react package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Improved types for react useIonModal

1 participant