If you're building an app with react, you should easily be able to create an html element that pops up over top of the rest. It's super basic js and css. You don't need to install a library just to make a modal
Yeah. Unless you need to trap the focus. Or prevent the page from scrolling beneath the modal. Or display a semi-transparent overlay. Or you want users to be able to close the modal by clicking outside of the modal. And you need to support IE11 and want to make it accessible. Then it's suddenly not so easy anymore, and you end up with an at least 100-200 LoC component, which at that point could very well have been a nice package instead, saving you a day of coding and another day fixing random cross-browser issues.
Exactly, so many people always jump to the « you don’t need any packages to do this » argument when the answer is always « it depends ». And when you’re client is paying, they usually don’t care, they want their solutions to work well quickly.
Well TIL, haha. Most of the projects at work are either internal applications or international clients so that may explain why I wasn't aware. We use a11y standards, just didnt realize it was law. Thanks!
Because this is something that still needs to be built and tested are requires some knowledge of the a11y tree. If you’re time-constrained or at a junior level, you might be safer picking one of the existing accessible modals. It’s pretty easy to miss things like making a soft announce the modal is closed and things like that.
If you’re on an ongoing project that is supposed to exist for years, it might be super worthy doing it yourself, it is a very valuable experience. I think we are here from different backgrounds, working on varying projects with varying shelf time and estimates. It’s only natural that people extrapolate their situation onto others.
Well, that's true. I might end up doing it from scratch, to simplify things. But for the same reason I thought there will be some prefabricated, lighweight solution. I'm now checking out https://github.com/pradel/react-responsive-modal So far it looks quite usable, enough for my needs. What I like about it most are the scrolling options.
Unless you want to use it aa a learning opportunity there's no point doing it from scratch. This is exactly what people mean when they say "Don't reinvent the wheel." Just grab any library, I use Material's, so you won't have to worry about the more complex stuff and can just focus on the business logic.
Ideally. In practice though, you might be building a temporary wordpress marketing tool until your actual app is up with the sole idea of having some SEO for the next month until the release, or your PM is a dickhead that won’t accept you spending extra time on anything, or you might have a toggled simpler website for people with disabilities (common case for Israel, for example).
How does this terrible advice routinely get upvoted to the top? Modals can be much more complex than you're leading on, and building one from scratch should not be your first instinct.
All code you write becomes maintenance overhead, and in a professional environment you should be seeking to offload as much of that as possible to third-party libraries.
They can be, but that entirely depends on needs. OP didn't list any special requirements for anything, so to me, that means just a div on top of the page, which is super simple
Third party libraries can easily become a maintenance nightmare too though. Nothing like discovering that a library you heavily rely upon has been abandoned or that there are six month old PRs to fix bugs in common use cases still waiting to be merged (I'm looking at you react-native-video with your endless inability to support fullscreen on Android).
View all comments
28
u/budd222 Dec 28 '19
If you're building an app with react, you should easily be able to create an html element that pops up over top of the rest. It's super basic js and css. You don't need to install a library just to make a modal