This content originally appeared on DEV Community and was authored by Kmyrrpen
I found myself needing to build a modal when a button is pressed. Seems easy I thought, just make a Modal component that renders a fixed div and toggle it whenever we click the button, or when we close the modal from the inside.
const [toggle, setToggle] = useState(false)
const handleToggle = () => setToggle(prev => !prev)
return (
<>
<button onClick={handleToggle} />
<Modal onClose={handleToggle} />
</>
what I noticed though is that my modal was being painted over by a relatively positioned element, I did have a z-index set on my modal and the relatively-positioned element had no z-index at all.
I identified the problem being that my modal was inside my position-sticky navbar which had a z-index of auto, the solution.. was to set the z-index of the navbar. But that wasn't enough for me, what if I wanted the modal in a non-statically positioned element with a lesser index than some other element?
My Solution?
- Create a context that will have a value of children we want our modal to render inside. create hooks that will handle subscribing and dispatching to the context.
- Make another component that will act like a placeholder, which will live at the top of our app and it's only job is to subscribe to our context and have it render the children
- Make a
useModalhook to make using modals easier. It will handle dispatching to the context, and removing the children from our context once it get's closed.
Now when I need to use a modal, I don't have to worry about it getting painted over, as it has the highest z-index and it's not constricted by an ancestor's position and z-index.
How useful was this in the long run? Not so much..
I never got into a situation where it met the requirements that my solution above was solving, plus, now I have even more problems as I had to deal with bugs from logical errors I've made with my solution.
And I don't even know if this was the best way to go, I haven't considered if someone already solved this problem and had shared a package for it, or if I even needed this solution in the first place!
In retrospect, what I now think was the best solution for my project.. was to set the z-index of the navbar! Just ONE line of code!
This content originally appeared on DEV Community and was authored by Kmyrrpen
Kmyrrpen | Sciencx (2022-02-06T11:17:10+00:00) How to overcomplicate a solution. Retrieved from https://www.scien.cx/2022/02/06/how-to-overcomplicate-a-solution/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.