Comments (3)
I think I don't get it. What's the use case? Pull request?
from react-portal.
Don't have a PR yet.
The use case is related to maybe
<A>
<Portal isOpened={some A state}/>
</A>
and you forget onClose
to change the state in A responsible for isOpened back to false. If something triggers a rerender of A, your Portal will open back up and you will be left scratching your head.
In controlled state, if you omit the onChange
equivalent you have a warning that if you are using isOpened, you need to use to listen to closing events, and then it's a simple matter of opening/closing the portal related to isOpened in componentWillReceiveProps and simply trigger the listener in closeOnEscape
, closeOnClickOutside
, etc ...
But by default, the portal will not close up anymore if you use isOpened, user have to send isOpened to false for closing/opening logic to happen only in componentWillReceiveProps (and componentWillUnmount) via isOpened. closeOnEsc
, closeOnOutsideClick
and calling closePortal
from the portal children, will simply trigger the onChange (or whatever you want to call it) so that user can do his stuff for the state (isOpened in this case).
Just like a controlled input.
from react-portal.
I get it know. This is a good idea. Yeah, it would be helpful to introduce the onChange
prop for the controlled state. It doesn't have to be mandatory (or firing some warning) though - no unnecessary BC break. People still can use the controlled state if they already implemented all closing logic in upper layers (outside of react-portal). Also, if they don't need to utilize closeOnEsc
, closeOnOutsideClick
or closePortal
, onChange
would be redundant (use-case when the portal is opened and closed programmatically, by server... etc).
Also, the README.md
should be updated with terms controlled / uncontrolled. It really makes sense and it is a concept that React devs are familiar with already (from forms).
from react-portal.
Related Issues (20)
- How to enable SSR of portaled content? HOT 9
- No umd bundle
- Support for react native HOT 2
- Add nodeID and nodeClassName props to Portal HOT 2
- Portal break when node=document.body
- can I render two elements in a portal? HOT 1
- Does not work with SSR HOT 11
- handleoutside not triggering on clicking the sibbling child element it open the both the menu item at once HOT 1
- closeOnOutsideClick does not work with reactstrap Modal component HOT 1
- Using state to conditionally render components causing PortalWithState modal to close when closeOnOutsideClick true HOT 2
- Portal closes when dragging from inside portal and releasing outside of portal
- [Feature Request] Optional prop to render only one child at a time
- closeOnOutSideClick triggered condition
- react-dom is not listed in peerDependencies HOT 3
- react-portal onOpen Not Firing
- openByClickOn Not Displaying The Button In v4
- demo page would be helpful
- Portal deprecated according to TS in VScode HOT 1
- Context information cannot be passed through the portal
- React 18 support HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-portal.