Gatsby: FR: Add an example for Modal usage

[mquandalle]

It would be interesting to have a “pinterest-style” modal example in the repository. The idea is that when you click on a link it opens in a modal window (which has controls to close it and go back to the background page), but when you load the same URL directly you go to a dedicated page with the full header/footer layout.

This is surprisingly difficult to do, in React in general, and slightly more complex in Gatsby v2 due of the removal of the global layout (mounted components lose their state when switching pages for instance). Also while trying to implement this behavior in my application I encountered bugs related to the modal page being unable to load correctly on first click.

For comparison, there is a corresponding example on the Next.js repository https://github.com/now-examples/nextgram

[KyleAMathews]

Yeah, check out Gatsbygram https://github.com/gatsbyjs/gatsby/tree/master/examples/gatsbygram — already upgraded for v2 — both the v1/v2 versions handle the first click

Live version running v1 at https://gatsbygram.gatsbyjs.org/

[thecyberd3m0n]

how can I find the source code of this:

https://gatsby-starter-with-gatsby-plugin-modal-routing.netlify.com/

?
unfortunately, I can't find usages of ModalContextRouting on Gatsbygram

[mxmzb]

@thecyberd3m0n i think here: https://github.com/lsirivong/gatsby-plugin-modal-routing/tree/master/examples/gatsby-default-starter :)

[machineghost]

@mxmzb That link is a 404. If you look at https://github.com/lsirivong/gatsby-plugin-modal-routing/ it has neither a tree, master, or examples directory (just src).

Also https://markoskon.com/modals-in-gatsby/ makes it seem like the Gatsbygram approach relies on outdated behavior. It outlines the (very complex and hacky) steps that are (evidently) needed to get page-based modals working in Gatsby.