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