lsirivong / gatsby-plugin-modal-routing Goto Github PK

Currently gatsby-plugin-modal-routing assumes that you want to use a stock react-modal modal. However, it could be useful if the plugin provided a way to use other modal components, such as a Styled Components-styled version of the react-modal, or possibly even a custom component that uses another modal library (eg. some UI frameworks provide their own modals).

I briefly looked at the code, and it seems the only place react-modal is actually used is in ReplaceComponentRenderer. Why not have a plug-in option called modalComponent (or just modal?) which replaces react-modal, but leave react-modal as the default value of that option?

Would you accept a PR implementing this?

A render occurs before state is updated inside of componentDidUpdate, causing the underlying route to be removed, and then re-created.

If there is any page state being stored in parameters, it's lost when the modal is closed.

I'm working on a galleryesque site where you scroll down an index and open items that are pages that open as modals. The items have prev & next buttons (modal links) to go between items, and then a close button to return to the index.

I have transitions working between index <=> page as per React Modal's docs but is there a way I could have transitions from modal <=> modal?

Thanks in advance

Hi there - Awesome Plugin here.

My use of it works great on Gatsby build. It sets up a nice modal that hangs over the page and is close-able. Like Instagram, yay!

But on gatsby build + serve, the modal just chills the bottom 20% of the page. Like something isn't working right on build.

In the past.....(recent past) I've had to use gatsby-browser or gatsby-ssr to wrap elements to get them to work right. Stuff breaks otherwise. Could that be the case here?

sandbox: https://codesandbox.io/s/github/kpennell/acrotagsProd/tree/master/?fontsize=14&hidenavigation=1&theme=dark

Maybe because I'm using a component with a graphql query at the bottom?

#50

Following the example in the docs, I create a component

const InspectionCost = () => {

  const handleForm = e => {
      e.preventDefault();
  }

return (
  <ModalRoutingContext.Consumer>
    <div>

          <Link to="/">Go back to the homepage</Link>
        </div>
  </ModalRoutingContext.Consumer>
  )
}

export default InspectionCost

I attempt to load this in a modal like so:

<li className="nav-item">
                              <Link
                                  to="/inspection-cost"
                                  state={{
                                    modal: true
                                  }}
                                  className="nav-link">
                                Get A Quote
                              </Link>
                            </li>

When it attempts to load the component I get the following errors:
A context consumer was rendered with multiple children, or a child that isn't a function. A context consumer expects a single child that is a function. If you did pass a function, make sure there is no trailing or leading whitespace around it.
And also
Uncaught TypeError: render is not a function
The above error occurred in the <Context.Consumer> component:

Any idea what's going on?

I have my app wrapped with an Auth Context:
`<authContext.Provider> ... </authContext.Provider>``

And then within my LoginPage (written as functional component) I'm using a custom useAuth hook to acess the current auth object and use its functions (e.g. login, signup, ...):
const auth = useAuth();

Following this example:
https://usehooks.com/useAuth/

Problem:
When I open the page directly under its URL everything works. When opened in a modal the auth object returned by useAuth() is undefined.

If I open a page as a modal and then refresh it, it stops being rendered as a modal and is instead just rendered as a regular page. In my case I want to always have the page displayed as a modal on top of a base page, even if the link refreshed or copied to be sent to someone.

Is there some way to force a page to always be displayed in a modal or is my only option to design the page to both fit a regular and modal style?

Example can be found in your demo site:
https://gatsby-starter-with-gatsby-plugin-modal-routing.netlify.com/

Click "Page 2 in Modal" and then refresh, it is then rendered as a regular page.

Hi, I see that you are using lodash only for the get functionality.
What do you say about importing only the lodash.get package to decrease unneeded bundle size?

Thanks,
Boris

Hi,

I've encountered this issue when I was firing a modal on my website. It doesn't seem to affect anything, but I'm curious why is it there and what can be done to eliminate it. I think that "import { ModalRoutingContext } from 'gatsby-plugin-modal-routing'" line causes it somehow since I don't have the same error on the pages without modals, but I'm not sure about it. I use the latest versions of both plugin and gatsby.

My code for a modal is the default at the time:

const ModalExamplePage = () => (
  <ModalRoutingContext>
    {({ modal = true, modalCloseTo = "/" }) => (
      <div>
        {modal ? (
          <Link to="/">
            Close
          </Link>
        ) : (
          <header>
            <h1>
              Website Title
            </h1>
          </header>
        )}
        <h2>Modal Page</h2>
        <Link to="/">Go back to the homepage</Link>
      </div>
    )}
  </ModalRoutingContext>
)
export default ModalExamplePage

I can provide you with additional pieces of code if you need any. Thanks!

For some reason, I don't seem to be able to get it to work.

I'm currently using the same package version as the example project (1.1.0-beta), even though I tried other versions too, and even copying the exact code from the example, but it doesn't work.

In fact, the props I receive from the ModalRoutingContext.Consumer is different from the one detailed in the docs.

I receive isModal instead of modal.

And isModal is always false.

Am I missing something here?

Any help is very appreciated. Thanks!

Originally reported in #16 (comment)

Should be able to set options in some way, possibly via gatsby-config.js

Total bummer -- this package seems really great!

I isolated the problem trying to get this set up -- if I include both this plugin and gatsby-plugin-transition-link, this doesn't work. Specifically, using the Link in the package with an asModal prop or a regular Link with state={{modal: true}}, the modal prop passed into the render props of the Consumer component (I'm using the starter example ConditionalLayout component verbatim) is undefined.

If I remove TransitionLink from the plugin list and restart, this works perfectly. Reversing the plugin order doesn't seem to fix anything.

I think the problem has to do with React.createContext. Possibly, the contexts in the two plugins are overwriting one another.

I'd love to help, but I'm unfamiliar with how the plugin is inserted into the app (in particular, where the contexts are rendered). I'll continue to try to poke around and make a PR if I figure this out, but I wanted to start an issue now that I've pinpointed what seems to be causing the problem.

Using something like framer-motion or react-spring, would it be possible to animate the entrance/exit of the modals, or would it be prohibited in any way by the design of the plugin/gatsby?

currnely have a gatsby app that does this with the menu and promo components?

www.alma.vacations (check it out on mobile to see what I mean)

Just want to make sure that this kind of animation would be supported before I dive in :-)

I use this to show on click content and the the content shown inside the modal content should not be bundled with the index file/main page because that is not shown to the user right away.

I know I can use this guide(https://www.gatsbyjs.org/docs/how-code-splitting-works/) to accomplish code splitting but it should come by default in my opinion.

The error is:

Your plugins must export known APIs from their gatsby-browser.js.

See https://www.gatsbyjs.org/docs/browser-apis/ for the list of Gatsby browser APIs.

- The plugin [email protected] is using the API "replaceComponentRenderer" which is not a known API.

Firstly, let me say that this plugin works great, I found it after following a few hacky tutorials which tried to implement something similar without any success, and now I can't be happier from the result.

The thing is, I've checked out the second example you referenced:

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

and I've noticed there are navigation links between modals, I tried to find instructions on this but without success, I checked out the repository, looked around and strangely it doesn't use the plugin, which makes me wonder why do you use it as an example?

so my questions are:

• is there any elegant way to currently do it with this plugin and it's just undocumented?
• if not, do you plan on supporting this kind of functionality?, I mean, would I be able to navigate to another modal from within the modal while passing the closeTo and stating that it should remain as a modal of the original page?

In an integration test like: There's a button, click on it, modal appears. Because i just can't find the modal anywhere in the jest-dom.

It would be helpful to provide an example showing how to pass an object to the modal that would provide a custom CSS class. I'm looking to customize the modal and am having trouble finding information on how to do this.

Currently I have:

gatsby-config.js:

    {
      resolve: `gatsby-plugin-modal-routing`,
      options: {
        // A selector to set react-modal's app root to, default is `#___gatsby`
        // See http://reactcommunity.org/react-modal/accessibility/#app-element
        appElement: '#___gatsby',

        // Object of props that will be passed to the react-modal container
        // See http://reactcommunity.org/react-modal/#usage
        modalProps: {
          className: "myContentClass",
        },
      }

But the className is not applied to the React Modal. Am I going about this correctly?

Does this plugin have support for the latest version of Gatsby? When trying to get modal to render state={{ modal: true }} doesn't seem to do anything and will still go to the link page but no indication of a modal

Hey @lsirivong ! Thank you for creating this plugin! Using it on my personal project.

I stuck with the issue of modal background scrolling like on your example:

I tried a few options like applying overflow: hidden to parent elements, checking if there any absolute elements but didn't find a solution.

Do you know what do with that?

Thanks!

Just implemented and loving the plugin, thank you for your time in creating.

I am just looking to add shouldCloseOnOverlayClick to the modalProps, however it isn't working for me. Any idea why this could be?

{ resolve: 'gatsby-plugin-modal-routing', options: { modalProps: { style: { overlay: { zIndex: 1001 }, content: { margin: '0 auto' } }, shouldCloseOnOverlayClick: true } } },

Hey this Gatsby plugin is awesome, thanks for creating it!

Would it be possible to disable the url rewriting? I like the ability to loading a route. But want to pass some props to it when the modal is triggered. If the modal "page" is refreshed or visited without the referring page it will be less useful.

Thank again

Is it possible to open a specific route always in a modal. When typing the route in my browser's adressbar directly it will open as a ordinary page. This is not always wanted. Some modals like image galleries should always open in a separate modal, don't you think?

Is it possible to animate on closing modal?