6 ms·

Modals in React

93 points by zackify 11y ago

ThePhysicist 11y ago
Here is our React/Bootstrap modal component: https://github.com/gitboard/gitboard/blob/master/src/js/components/generic/modal.jsx 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).
- zackify 11y ago
  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/2015-07-29-modals-in-react.md https://github.com/Legitcode/ReactJSNews/blob/master/posts/2... Anyone is welcome to write a post on the site!
  - ThePhysicist 11y ago
    Cool, will do that!
- fredoliveira 11y ago
  If you ever extract your component into its own repository, we'd love to have you submit it to http://react.parts http://react.parts!
- nicksellen 11y ago
  it declares jquery as a requirement but doesn't actually use it - https://github.com/gitboard/gitboard/blob/master/src/js/components/generic/modal.jsx#L10 https://github.com/gitboard/gitboard/blob/master/src/js/comp...
  - ThePhysicist 11y ago
    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.
danmaz74 11y ago
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-cheatsheet/ 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!
- bluejekyll 11y ago
  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.
  - danmaz74 11y ago
    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 https://news.ycombinator.com/item?id=9967220
  - lukasm 11y ago
    For the reference http://material-ui.com/#/components/dialog http://material-ui.com/#/components/dialog
- Sir_Cmpwn 11y ago
  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-understanding-of-Flux.html http://www.drewdevault.com/2015/07/20/A-practical-understand...
- k__ 11y ago
  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.
sgt 11y ago
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 11y ago
  There is angular-strap and angular-ui for bootstrap based sites
chrisra 11y ago
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.
- TuringTest 11y ago
  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 https://en.wikipedia.org/wiki/Modal_window#Design [2] https://en.wikipedia.org/wiki/Mode_(computer_interface)#Assessment https://en.wikipedia.org/wiki/Mode_(computer_interface)#Asse...
- k__ 11y ago
  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.
- profinger 11y ago
  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.
- syllogism 11y ago
  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.
Cshelton 11y ago
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 11y ago
  What's wrong with that CSS?
  - evan_ 11y ago
    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 11y ago
      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/83bfff7f0765503b990b96c303eef67009e48d77/js/modal.js#L277 https://github.com/twbs/bootstrap/blob/83bfff7f0765503b990b9...
    - deleted 11y ago
      [deleted]
seivan 11y ago
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 11y ago
  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 11y ago
    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.
deleted 11y ago
[deleted]
dominotw 11y ago
Just use polymer components and call it a day.
- moretti 11y ago
  How a polymer component would be better than a react component?
evan_ 11y ago
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.
Cymen 11y ago
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

93 points by zackify 11y ago

Here is our React/Bootstrap modal component: https://github.com/gitboard/gitboard/blob/master/src/js/components/generic/modal.jsx 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).

zackify 11y ago
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/2015-07-29-modals-in-react.md https://github.com/Legitcode/ReactJSNews/blob/master/posts/2... Anyone is welcome to write a post on the site!
- ThePhysicist 11y ago
  Cool, will do that!
fredoliveira 11y ago
If you ever extract your component into its own repository, we'd love to have you submit it to http://react.parts http://react.parts!
nicksellen 11y ago
it declares jquery as a requirement but doesn't actually use it - https://github.com/gitboard/gitboard/blob/master/src/js/components/generic/modal.jsx#L10 https://github.com/gitboard/gitboard/blob/master/src/js/comp...
- ThePhysicist 11y ago
  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.

danmaz74 11y ago

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-cheatsheet/ 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!

bluejekyll 11y ago
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.
- danmaz74 11y ago
  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 https://news.ycombinator.com/item?id=9967220
- lukasm 11y ago
  For the reference http://material-ui.com/#/components/dialog http://material-ui.com/#/components/dialog
Sir_Cmpwn 11y ago
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-understanding-of-Flux.html http://www.drewdevault.com/2015/07/20/A-practical-understand...
k__ 11y ago
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.

sgt 11y ago

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 11y ago
There is angular-strap and angular-ui for bootstrap based sites

chrisra 11y ago

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.

TuringTest 11y ago
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 https://en.wikipedia.org/wiki/Modal_window#Design [2] https://en.wikipedia.org/wiki/Mode_(computer_interface)#Assessment https://en.wikipedia.org/wiki/Mode_(computer_interface)#Asse...
k__ 11y ago
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.
profinger 11y ago
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.
syllogism 11y ago
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.

Cshelton 11y ago

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 11y ago
What's wrong with that CSS?
- evan_ 11y ago
  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 11y ago
    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/83bfff7f0765503b990b96c303eef67009e48d77/js/modal.js#L277 https://github.com/twbs/bootstrap/blob/83bfff7f0765503b990b9...
  - deleted 11y ago
    [deleted]

seivan 11y ago

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 11y ago
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 11y ago
  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.

deleted 11y ago

[deleted]

dominotw 11y ago

Just use polymer components and call it a day.

moretti 11y ago
How a polymer component would be better than a react component?

evan_ 11y ago

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.

Cymen 11y ago

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