search

andria-dev / react-spring-modal

Animatable and accessible modals built with react-spring
34 stars 8 forks source link

NextJS compatible? #10

Closed NickToye closed 3 years ago

NickToye commented 4 years ago

Before I dive down the rabbit hole, is this modal compatible with Next JS? I had a play with the example modals and although something is happening, classes being added etc... Nothing is being added into modal-root via portals.

Now I know the portals work because I had a basic modal using simple hooks and that worked.

andria-dev commented 4 years ago

This package should work with NextJS as it should support server-side rendering as I wrote the code to handle being in a NodeJS environment as well

NickToye commented 4 years ago

Ok, well it must be something my end then, I just wanted to check.

andria-dev commented 4 years ago

If there's an error just let me know what it is, maybe I can help or maybe it is the library. I don't believe I've had any official projects use NextJS with this package so it very well could be a small detail I overlooked

NickToye commented 4 years ago

Well I don't get any errors. The css seems to load and the classes change the body, so activating the modal freezes the body, but nothing gets injected into the modal-root element, which I found strange because I had a previous modal written using context hooks and that injected it fine. So I don't really have much to go on.

andria-dev commented 4 years ago

Did you give the modal-root element the id of modal-root? (Sorry power went out here for a while, wasn't able to respond sooner)

NickToye commented 3 years ago

Hi Chris,

Sorry for the delay in responding, but I moved onto a completely new project and my focus left me for a while on this.

So I've picked it up again and I thought it would be easier if I created a Next project and install your package. You can see this here.

https://github.com/NickToye/modal-test

Thanks

Nick

andria-dev commented 3 years ago

@NickToye, your test-modal project isn't working as expected because you have #modal-root inside of #__next.

What you have:

<html>
<body>
    <div id="__next">
        <div class="Home">
            <!-- your page content -->
            <div id="modal-root"></div>
        </div>
    </div>
</body>
</html>

What you want is:

<html>
<body>
    <div id="__next">
        <div class="Home">
            <!-- your page content -->
        </div>
    </div>
    <div id="modal-root"></div>
</body>
</html>

How to place the #modal-root at the base of the <body> in Next

You will need to create a file called "_document.js" in your pages directory — ./pages/_document.js. From there you have to create a custom class that extends Next's Document class. Inside that class you must have a render function that returns several things like so:

import Document, {Html, Head, Main, NextScript} from 'next/document'

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        return {...initialProps}
    }

    render() {
        return (
            <Html>
                <Head />
                <body>
                    <Main />
                    <div id="modal-root"></div>
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

More information on creating a custom Document in Next

NickToye commented 3 years ago

Ok, I'm fairly new at this Next JS stuff, thanks for that I will give it a go.