Gatsby React Open a URL in a Modal

Question

I am new to using React and Gatsby, and I am trying to get a URL (created by Gatsby from an MD file) to load in a modal over the main index page.

What is the best way to do this is there a recommended react-modal library I should use? How should I pass the new page into the modal (with props?)

TIA

Answer 1

You ask “How should I pass the new page into the modal?”, but there is no notion of “pass[ing]” a “page” into a “modal”. It would be helpful if you clarified and used terminology that wasn't ambiguous.

If “page” is the same as the URL that you have, and by “pass” you mean “show up inside of”, then I think what you're looking for is an iframe .

There are some React components that wrap an iframe element, but they're not necessary; you can just do this:

<iframe
  title="Modal Embed"
  className={styles.frame}
  src={props.yourUrl}
  allowFullScreen
/>

Answer 2

或者，您可以查看此插件https://www.gatsbyjs.org/packages/gatsby-plugin-modal-routing/