New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Trigger modal to open based on a prop boolean value #15

wants to merge 3 commits into
base: master


None yet
4 participants
Copy link

muhanad40 commented Jan 20, 2016

This a temporary solution, but think you should implement it better than my solution. This basically triggers the stripe modal to show based on a boolean value. Would prefer to have a prop that triggers the stripe modal to open up without having to click on the button.

Basically I wanted the stripe modal to open after a validation check is done on a form. Once the form was valid then the stripe modal is triggered to open. Currently you only have an onClick that triggers the modal to open.

ISSUE: The only issue is that once the modal opens and the user closes it, it won't be opened again. That's because say you have a boolean value in your state that you initially set with false. Then you change it to true and the modal opens up. When you close the modal, that state value is still set to true. Which when you try to trigger the modal again, it won't open. My temporary solution was to do a setTimeout and reset that boolean to false after 1 second.

Also, the prop name (showModal) is not a good name. Doesn't communicate that it is a trigger boolean for the modal to open up. So definitely use another name.

Hope this clears what I'm trying to get across.


This comment has been minimized.

Copy link

MandarinConLaBarba commented Apr 28, 2016

Any thoughts on implementing this? We also want to be able to automatically trigger the modal w/o user interaction (the 'Pay w/ card' button).


This comment has been minimized.

Copy link

azmenak commented May 3, 2016

Hey @muhanad40 thanks for contribution! I'll finally have some time to make some improvements to this component as its now part of my full-time job 👍

Top of the list is making this more "react-like", IE the UI will be a function of the props passed and will no longer depend on clicks and such.


This comment has been minimized.

Copy link

fourcolors commented Jul 22, 2016

I need this feature too so I'm pulling it into my project until it's officially merged. Thanks Mandarin.


This comment has been minimized.

Copy link

azmenak commented Aug 5, 2016

See comments in #28, I've added a new prop desktopShowModal. In my testing, it worked as intended with a couple caveats:

  1. THIS WILL NOT WORK ON MOBILE, nothing that can be done about this
  2. You must set the prop to false from the function passed as token when receiving a token object, or the popup will open again on its own.

@azmenak azmenak closed this Aug 5, 2016

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