(fix) Breaking changes in Gatsby 3.0

[loke-dev]

This PR fixes #57

• Updated dependecies
• Replaced "replaceComponentRenderer" with "wrapPageElement"

If you want to use these changes before this has been merged you can find the fork here:

https://www.npmjs.com/package/gatsby-plugin-modal-routing-3

[LiamKlyneker]

you save my day <3, works fine for v4

[plcdnl]

You save my day too, thank you!

[ajmeese7]

@loke-dev could you add a TypeScript definition file please?

[loke-dev]

@ajmeese7 I think that lies more on @lsirivong to implement in the package, but it seems like this is abandoned. I'm sorry but I'm not doing any features on this, I only published a hotfix so I (and others) could keep using this package.

[ajmeese7]

Sounds good, I'll work on a TS fix when I have the time

[decanTyme]

I also made a similar fork but I've already converted the legacy replaceComponentRenderer class component to a functional one and some other changes. This way, it will be easier to maintain in the future as I am also interested in maintaining and adding features to my fork for my sites. Haven't thoroughly tested it yet tho but it does basically work and I've already used it in one of my sites (gatsby@v4).

~~I'm currently planning on exposing react-modal's props so I can still use those props in an actual component without ever using the gatsby-config options, which is more practical IMO since I can change it on each instance (please do point me out if there's a way with the current setup!).~~ And yes, it would be great to finally have types but as I'm still quite new to this, I don't know how and where I would start if I wanted to release the types (if ever). If anyone's interested, here you go: https://github.com/decanTyme/gatsby-plugin-modal-routing

I'm curious tho that if this is really already abandoned, can I alter the author details as I make more changes moving forward? Looks like @lsirivong is not gonna be responding anytime soon. Even this PR was made over a year ago now.

UPDATE: I'm excited to announce that I've successfully exposed react-modal's props and tucked it all away in a neat hook:

const [modal, closeTo] = useModalRouting({
  modalProps: {
    contentLabel: "Custom content label",
    onAfterOpen: () => {
      console.log("onAfterOpen")
    },
    closeTimeoutMS: 300,
    style: { overlay: {}, content: {} },
    id: "some-id",
    onRequestClose: () => {}, // would error, is an internal-exclusive prop
  },
})

//..
return (
  <div>
    {modal ? (
      <Link to={closeTo}>Close</Link>
    ) : (
      <header className="mb-2">
        <h1>Website Title</h1>
      </header>
    )}

    <h2>Modal Page</h2>

    <Link to="/">Go back to the homepage</Link>
  </div>
)

This way, the <ModalRoutingContext.Consumer> clutter is removed - but it is still available to use. In my initial testing, it accepts almost all react-modal props, except for isOpen and other props used exclusively internally of course (or maybe still provide a way?). The gatsby-config.js options still works and will become the "default" props in all modal instances.

As always, please do point out if there's a better way, but this I think is the cleanest API to go, since it aligns with React's hook concept. Let me know what ya'll think!

[stephanebruckert]

@lsirivong please release this if you get a chance 🙏 having to use the temporary package gatsby-plugin-modal-routing-3 currently

[loke-dev]

😞