Modals in React | Hacker News Reader

Modals in React

reactjsnews.com

93 pointszackify34 comments

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... )

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

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.

Reflux is good, but I'm worried about how much they depart from the Flux architecture. What will happen if in the near future Facebook will release their own library? A lot of refactoring...

PS somebody posted a link to my post, maybe it's better to continue there if you're interested in the discussion: https://news.ycombinator.com/item?id=9967220

For the reference http://material-ui.com/#/components/dialog

I also just wrote a blog post about understanding Flux because I felt that the docs were insufficient:

http://www.drewdevault.com/2015/07/20/A-practical-understand...

The action creators where a real pain point for me.

I'm coming from MVC where actions are the methods of controllers. But in Flux they are objects passed to the dispatcher and the functions who create them aren't actions, but actions creators.

But I have to say, I got my first impression of React/Flux from a project that was already using it (Redux) in production with a big chunk of integration code around it.

I initially found them a pain point because they weren't explained well - and because the name is pretty bad IMHO - but after all they're pretty simple.

This is excellent - clear, concise and covers the main points. Thank you.

You're welcome!

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.

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.

See [1] and [2] for an assessment of when (not) to use them.

They are particularly ineffective for protecting the user against errors, except on systems which use them very sparingly (such as in the web, thanks to browsers adopting non-modal bars for most warnings and search actions.) We older netizens remember the nightmare that was every other web page throwing a modal alert(); that blocked the browser on all the open tabs.)

[1] https://en.wikipedia.org/wiki/Modal_window#Design

[2] https://en.wikipedia.org/wiki/Mode_(computer_interface)#Asse...

I never had to use one.

On the other hand, I don't know much about them so I don't even get the idea that I could use them in a UI design.

Why would you not use it? You can annoy your user with it and not have the concern of being blocked by some stupid popup blocker? Do you want to take a survey? Sign up for my newsletter? I know it's your first time on the site and you didn't even get to the content yet but SERIOUSLY I NEED YOUR EMAIL ADDRESS.

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.

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.

Here is our React/Bootstrap modal component:

https://github.com/gitboard/gitboard/blob/master/src/js/comp...

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).

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... Anyone is welcome to write a post on the site!

Cool, will do that!

If you ever extract your component into its own repository, we'd love to have you submit it to http://react.parts!

it declares jquery as a requirement but doesn't actually use it - https://github.com/gitboard/gitboard/blob/master/src/js/comp...

Gitboard as a whole uses jQuery, but not the component. I will have to clean up the code a bit it seems, will do that in the coming days and publish the component.

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

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.

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

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.

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.

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.

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?

What's wrong with that CSS?

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.

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...

Just use polymer components and call it a day.

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

Reply on news.ycombinator.com