In the react realm, every problem is solved by throwing another layer of complexity/abstraction/whatever you call it
[1] Adapted from https://www.goodreads.com/quotes/175803-in-the-pursuit-of-kn...
Why do not use a more simple approach, say jQuery?
Once in a blue moon, I want to add a screenshot or other image to a post. Such images are of various sizes, mostly larger than the (max)width of the content. I use CSS to scale them down to fit with the text, but sometimes images displayed like that are too tiny to be legible. For a long time I handled this case by wrapping <img> with <a>, basically like this:
<a href="$IMG_SRC"><img src="$IMG_SRC" alt="" /></a>
At some point, I gave up and included a bit of JavaScript, which enlarges the image while you stay on the same page. I used some kind of fancybox derivative - a jQuery plugin.
Now tell me that I should've used React.
For anyone else covering the same dilemma and doesn't care about transitions:
https://codepen.io/gschier/pen/HCoqh
Or, reduced further:
CSS
.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
outline: none;
display: block;
}
<a href="#img1">
<img src="image.png" class="thumbnail">
</a>
<a href="#_" class="lightbox" id="img1">
<img src="image.png">
</a>
(See CodePen link for code credit. Pretty clever little item, if you don't have to parse the pure markup. Even then it's not overly intrusive.)
Source: I'm currently building out my own Javascript-light blog/cv site, even though I generally like working with React. It's just not needed for everything. I'll likely extend on this at least a bit for some nicer effect with some current Javascript— barring older browsers from the lightbox effect but still able to read the thing in lynx and if need-be.
It shouldn't affect screen readers or Lynx users too much.
I also highly recommend Spectre CSS! I've been toying with it, and it seems like great work. I suggest checking out the "experimental" features.