This repository has been archived by the owner on Aug 21, 2023. It is now read-only.
PropProvider Context + Portal Fixes for React 16 #454
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This update fixes the transfer for `PropProvider`'s context to content rendered with `Portal`. During a React 16 update, we discovered that `PropProvider` values defined outside of the portal'ed content were not being transferred. This is due to how `ReactDOM.unstable_renderSubtreeIntoContainer` renders the content vs. React 16's new context system. The solution was to create a new HOC (called `contextConnect`), which provides a component directly with the values from the closest `PropProvider`. Enhancing `Portal` with this new HOC, I'm able to pass the values through the children elements. Things work as expected!
ItsJonQ
changed the title
ItsJonQ
commented
Jan 25, 2019
|
|
||
| this.portal = ReactDOM.unstable_renderSubtreeIntoContainer( | ||
| this, | ||
| <PropProvider |
There was a problem hiding this comment.
This is the magical bridge right here that transfers the PropProvider context props!
Pull Request Test Coverage Report for Build 1536
💛 - Coveralls |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PropProvider Context + Portal Fixes for React 16
(GIF: Demo shows a iFrame rendered, Portal'ed component with buttons correctly rendering values defined by a parent
PropProvider. In other words.. super hard mode!)This update fixes the transfer for
PropProvider's context to content renderedwith
Portal.contextConnect
During a React 16 update, we discovered that
PropProvidervalues definedoutside of the portal'ed content were not being transferred. This is
due to how
ReactDOM.unstable_renderSubtreeIntoContainerrenders the contentvs. React 16's new context system.
The solution was to create a new HOC (called
contextConnect), which providesa component directly with the values from the closest
PropProvider. EnhancingPortalwith this new HOC, I'm able to pass the values through the childrenelements. Things work as expected!
ReactDOM.createPortal?
I've experimented with this solution. It kinda works with HSDS's Portal mechanism. However, the
requirement to support React 15, iFrames, and programatic open/close makes this (native) solution
very unstable.
We should consider exploring this once we're fully migrated to React 16 :)
Refactors
I made some refactors to the
Portalfile structure during this update. I decided against convertingthings to Typescript (for now).
Testing
This update has been manually tested in React 15 and React 16. Everything appears to be working,
including supported for nested iFrame rendering.