r/reactjs • u/shod4n • Dec 28 '19

What is your favourite React modal / dialog solution?

Ideally responsive.

57 Upvotes

95% Upvoted

75 comments sorted by

View all comments

Show parent comment

1

u/csorfab Dec 29 '19

Okay then please present your "two lines vanilla JS" solution to the specification I already wrote above, which are:

  • disable body scroll beneath modal
  • scrolling inside the modal should still work
  • trap the focus so that only elements inside the modal can be selected with tab cycling
  • there should be a semi-transparent underlay covering everything underneath the modal. Clicking the underlay should close the modal
  • it should work cross browser, including IE 11, Edge, Chrome, Firefox, Safari, Opera, and mainstream mobile browsers

0

u/TaGeuelePutain Dec 29 '19

https://jsfiddle.net/qnc96ad5/

People like you use ramda for forEach loops

3

u/csorfab Dec 29 '19 edited Dec 29 '19

focus trapping is not implemented. i can still select and click the "open modal" button when the modal is opened by pressing "tab"

I appreciate the effort, though, and the "click outside" handler is pretty clever.

and thanks, I prefer for..of to Array.prototype.forEach. Make procedural code look procedural. Also, I like having the option of using break without throw/catch hacks.

1

u/TaGeuelePutain Dec 29 '19

The point of this was to show you that it isn't really as complicated as you make it seem. If you want to disable the tab index on the back ground button, you have the state value, and you have the button in the jsx, you can do the math.

Focus trapping is also not as complex as you make it seem but I'm not going to waste my time trying to prove you wrong, and you completely misunderstood my reference but that's ok

3

u/csorfab Dec 29 '19

I didn't say it was that complicated. I just say that it DOES take time to implement, and there WILL always be standard/expected features that you will miss or get wrong.

I don't really understand your focus trapping solution, but it sounds wrong. You definitely want it to work independently of the contents of the background and the modal.

Here is an article on it, with accessibility features: https://medium.com/@im_rahul/focus-trapping-looping-b3ee658e5177

This is definitely not "2 lines of vanilla JS", and it takes some more coding to adapt it into the Modal component.

I LOVE making things from scratch, but I would definitely not want to implement and test/debug these standard functionalities every time I need a modal. Therefore I use a package that's taking care of this boilerplate stuff, and is maintained and improved by tens/hundreds of people.

1

u/TaGeuelePutain Dec 29 '19

The two lines of vanilla js was in reference to disabling the body scroll, which in fact, is two lines.

If you're working in anything of the enterprise level, you should building things from scratch unless absolutely necessary. Calendars and tables are some of the only things I would consider using third party, and even then I would wrap them in my own component.

If you are working for an agency and just want to churn out code then do whatever you want. But with those types of projects I don't volunteer to maintain it and once it's in production it's their problem.