ionic-team / ionic-team/ionic-framework
bug: Ionic 8 React - Modals cannot consume context data
- Dominant language
- TypeScript
- Stars
- 52.7k
- Forks
- 13.3k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 51
Description
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/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 report this problem, without success.
### Ionic Framework Version
v8.x
### Current Behavior
Modals are unable to consume data using React's context provider. All values provided by context are `undefined`.
### Expected Behavior
Receive provided context data in modals
### Steps to Reproduce
1. Create React context
2. Open modal
3. Consume context
### Code Reproduction URL
https://github.com/playaz87/ionic-7-modal-context
### Ionic Info
Ionic:
Ionic CLI : 7.2.0
Ionic Framework : @ionic/react 8.2.5
Capacitor:
Capacitor CLI : 6.1.1
@capacitor/android : not installed
@capacitor/core : 6.1.1
@capacitor/ios : 6.1.1
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v18.18.0
npm : 9.8.1
OS : macOS Unknown
### Additional Information
So basically this issue is the same as this one: https://github.com/ionic-team/ionic-framework/issues/27546
However the suggested solution is not good for every scenario.
In my case the context provider can't be above the `IonApp` component since it is only exist deeper in the tree.
I think ionic should provide a way to overcome it. A solution that might work pretty good is like [antd](https://ant.design/) [useModal](https://ant.design/components/modal#modal-demo-hooks) hook. This hook provide a contextHolder which you put within your jsx (which than will be mounted there) and by that you can access the context.
Contributor guide
Assessment
This issue has not been assessed yet.