Recommended method for opening PortalWithState

[readeral]

I'd like the benefits of closeOnEsc and closeOnOutsideClick by using PortalWithState, however I need to open my portal in response to a different event (not a button nested inside my portal tag). Is there a recommended way of calling the openPortal function on a PortalWithState?

[tajo]

Hey, you might need to use similar approach as in V3: https://github.com/tajo/react-portal/blob/master/READMEv3.MD#open-modal-programmatically

If it works, could you please create a PR and add it into master (V4) docs as well? Thank you!

[ranneyd]

@readeral @tajo works like a charm! I use the latest recommended syntax for refs:

https://reactjs.org/docs/refs-and-the-dom.html

<PortalWithState
   ...
   ref={portal => this.portal = portal}
>...

Then this.portal.closePortal and it works perfectly.

[readeral]

Excuse me for being a little dense... it's early here and I've had little sleep! So the ref attribute goes on PortalWithState - e.g. <PortalWithState closeOnOutsideClick closeOnEsc ref={portal => this.portal = portal}> - and then you're able to call this.portal.openPortal anywhere? - e.g. <button onClick={this.portal.openPortal}>Test</button> - I'm having a little trouble understanding how to set it up, as I'm getting a "Cannot read property 'openPortal' of undefined" error.

[readeral]

Ah. {() => this.portal.openPortal()}

But now getting "Cannot read property 'nativeEvent' of undefined" error in portalwithstate.js

[ranneyd]

@readeral try e => this.portal.openPortal(e). In the future this should also be fixed by #176

[readeral]

excellent, thanks! I'll compile this into a PR