
Modals in React - zackify
http://reactjsnews.com/modals-in-react/
======
danmaz74
A bit off topic, but after studying React js and loving it I also started
studying Flux. I found that the intros were a bit confusing, and needed to
write a "visual cheatsheet" for my team (if interested you can find it here:
[http://danmaz74.me/2015/07/27/flux-architecture-visual-
cheat...](http://danmaz74.me/2015/07/27/flux-architecture-visual-cheatsheet/)
)

TL;DR for the React/Flux team if you read this: please update the Todo
tutorial!

~~~
bluejekyll
I agree. I've been using react with reflux, reflux is an excellent
implementation of the flux model. It makes it simple to wire global modals
into actions which can trigger those from anywhere in the app.

Also more on topic, I really like the material-ui project, and it's modals are
quite nice.

~~~
lukasm
For the reference [http://material-
ui.com/#/components/dialog](http://material-ui.com/#/components/dialog)

------
evan_
I'm surprised at how many of these use props- or even methods- to show/hide
the overlay rather than simply not rendering the <Overlay> component.

This article is really shallow so I'd just like to suggest you look at the
code for the Rackt modal- it takes the children you pass it and renders them
in a new React container, a pattern it calls a "portal". That sidesteps all of
the issues with rendering a modal in the middle of your markup (CSS cascading
mainly). I thought that was really clever when I saw it.

------
chrisra
My first thought was: why are you helping people build the one of the worst UI
components out there?

Not sure where it should fit in the current UI? Oh just throw it in a modal,
restricting the user's ability to interact with anything else on the page,
requiring an extra click to close the modal.

I'm sure there are good times to use them, but typically I find they are
restrictive.

~~~
syllogism
Modals have always had a place on native apps, and they similarly have a place
in web apps. If you're working on something in a single page app, you
shouldn't be taken away from it just to open some settings.

~~~
malandrew
It is extremely rare that you actually need to block the UI. Most uses of
modals would be better served with local notification that respects fitt's
law. An example would be popping up a "confirmation tooltip" adjacent to a
delete button that was just pressed. The subsequent required mouse movement
will be a short travel away. A modal in the middle of the screen moves the
locus of focus, is jarring and blocks the UI.

Simply put, blocking the UI is hostile.

------
ThePhysicist
Here is our React/Bootstrap modal component:

[https://github.com/gitboard/gitboard/blob/master/src/js/comp...](https://github.com/gitboard/gitboard/blob/master/src/js/components/generic/modal.jsx)

Initially we used a 3rd party component but we finally wrote this much simpler
version. It uses only React state variables to show/hide the modal and does
not require any jQuery or Bootstrap JS to work (both of which can cause
problems when mixing them with React). Feel free to reuse this code, the whole
repository (Gitboard) is currently licensed under AGPL but we would be happy
to provide e.g. an MIT license for the components or even make it public
domain (as this is hardly more than a code snippet).

~~~
zackify
Hey, creator of ReactJSNews here. Feel free to add it to the post and send a
pull request!
[https://github.com/Legitcode/ReactJSNews/blob/master/posts/2...](https://github.com/Legitcode/ReactJSNews/blob/master/posts/2015-07-29-modals-
in-react.md) Anyone is welcome to write a post on the site!

~~~
ThePhysicist
Cool, will do that!

------
Cymen
If you want one that doesn't leave DOM lingering when closed, look for one
that uses this or the same approach:

[https://github.com/tajo/react-portal](https://github.com/tajo/react-portal)

------
sgt
Slightly off topic, but is there an AngularJS equivalent of Elemental UI? I
also find myself using the same CSS and libraries over and over again, and
effectively spending too much time tweaking basic forms etc.

~~~
timboslice
There is angular-strap and angular-ui for bootstrap based sites

------
seivan
Nothing about routes in the article. I know how to do it with React-Route, but
I was hoping it would show other people.

Getting tired of modals (especially for login/signup) that doesn't have a
route to it.

~~~
Bahamut
I feel the opposite - I don't understand why a modal should have a route most
of the time. It seems clunky and usually should not be a part of browser
history.

~~~
seivan
Login and Signup for instance so you can send a link to a friend so they don't
have to find the buttons on their tiny phones.

Settings, so you can send it to your parents so they can fix that shitty
notification spam they got going, etc.

That's just my take on it.

------
Cshelton
The problem I still have with the modals is the scrolling behavior. Aside from
taking over the scroll event, which I do Not want to do, it seems if I want a
modal to scroll without the background scrolling, the only way is to put a
'overflow: hidden' on the body tag. Anybody have a more clever way of doing
this?

~~~
spicyj
What's wrong with that CSS?

~~~
evan_
For one thing it hides the scrollbar which in some browsers causes the whole
page to shift by a number of pixels. It's not the worst thing but it's a
little bit distracting. My QA people recently sent me a bug that was basically
this issue.

~~~
moretti
Exactly, and you can't simply set a left margin because the scrollbar width is
different in every OS. This is what bootstrap does:
[https://github.com/twbs/bootstrap/blob/83bfff7f0765503b990b9...](https://github.com/twbs/bootstrap/blob/83bfff7f0765503b990b96c303eef67009e48d77/js/modal.js#L277)

------
dominotw
Just use polymer components and call it a day.

~~~
moretti
How a polymer component would be better than a react component?

