I'm building a Mac app using electron and react, and I'm using a modal window to redirect my users to the google login page using the loadURL method.
This causes that the whole window is covered by the modal dialog, with no way for the user to return to the previous page unless he finishes the google login flow.
I would like to have a header on top with a back button so that the user can dismiss the modal if needed. Can I insert HTML to the BrowserWindow after it has loaded the url content? Or is there a cleaner way to achieve this?
Related
I have a chatbot running on some port. I have integrated it inside an iframe in a website. Is there any way to display an popup or modal outside of that iframe when clicking some link inside that chatbot?
There is a very cool concept in react called React Portal which allow you to render your component on any specific element even outside of your Root App.js component.
I have a web application which builds with reactjs. In this application, I want to open a route inside a popup window. The process is like this;
There is a patient details page. inside that page, the user can see a details edit button. whenever the user clicks that button I want to open my editPatient route as a popup. What is the easy and best way to do this??
this is the route <Route path={"/patient/:id"} component={EditPatient}/>
I'm making various asynchronous http calls in my reactjs app. Errors from the server are streamlined and I would like to show an error dialog box in react regardless of the current page. I'm currently using the alert but I really would like a styled modal error box.
How do I detect the current page and inject the modal box and display it?
Thanks!
I think you should create the dialog dynamically. It means that you will create and mount the Dialog component right after the error appears. You can refer this approach from ant.design team. https://github.com/ant-design/ant-design/blob/master/components/modal/confirm.tsx
FineUploader is great! But I have such a problem: I use React Bootstrap as my UI framework. I need upload button, but after user selects some image file, they need to deal with the image first in a modal dialog window of React Bootstrap, perhaps rotate it, or scale it, or crop it, etc. And when user clicks "Finish" button, then the image should be uploaded to the Node.js server, and display progress bar in the modal dialog body. After the server has received all of the file, then the modal dialog should be closed.
I read through the code of FindUploader, but can't find what I need. FineUploader do have FineUploaderBasic class, with it I can pass the upload button element. But I can't turn the FineUploaderBasic object into FineUploader object, and initialize the template when the modal dialog open. I can't just make the template invisible first, and display it when the modal open. Because React Bootstrap won't add modal into the DOM before user opens the modal.
So should I define a new method to turn a FineUploaderBasic object into a FineUploader object? Or is there any other way to make it?
Background:
I am using backbone.js & Twitter Bootstrap in my client-end page.
On clicking the logout button on header, a confirmation dialog should open.
The question is that
should I use router such as /logout to change to logoutView ?
If click No in the dialog, how could I show the main content with data before the dialog is opened.
Thanks!
Yes, you can use a router and you should.
First thing to know, is you have to render application's layout before dispatching any route, because the layout is rendered and needed for every action, so it's independant, right ?
Second you create a "logout" route in your router and give it the "#logout" hash, then in your "logout" action you open the modal.
Don't use router for such thing. Just fire the modal directly because:
On changing the router, you are gonna push that to the History. Hitting the browser's back button shouldn't really open a modal window.
URLs should be crafted in a way to be bookmarked. You don't want a URL that would open a popup or a modal window!
It's much simpler just to start the modal than to create a variable to hold the previous view and to fall back to it when clicking No
I have build client-side apps using different MVC frameworks like AngularJS and Backbone.js. Every time I faced the same situation you are talking about and found that the easiest and most accurate way is to just show the modal.
UPDATE
Please watch this. This is Jeremy Ashkenas the author of backbone.js stating exactly your situation about how should URLs be used and weather if they should be used to open a pop up or not.