Is your feature request related to a problem? Please describe. <p

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

NextJS example wanted about react-context-devtool HOT 5 CLOSED

ivawzh commented on August 15, 2024 8

NextJS example wanted

from react-context-devtool.

Comments (5)

deeppatel234 commented on August 15, 2024 5

@Vadorequest @ivawzh nextjs support will be added soon. idea is to use devtool without any node module. POC is in progress. will be release soon.

Thanks for your patience,
Deep

from react-context-devtool.

deeppatel234 commented on August 15, 2024 2

@ivawzh @Vadorequest @nitrique NextJS support added in new version on react-context-devtool. now you can run this extension without any node module. Thank you for your patience.

Cheers 🍻

from react-context-devtool.

Vadorequest commented on August 15, 2024

@deeppatel234 Any idea how to do this? 😄

from react-context-devtool.

Vadorequest commented on August 15, 2024

Awesome, thank you for the quick feedback!

from react-context-devtool.

nitrique commented on August 15, 2024

Hi @ivawzh, I do that way (but maybe we have a better way to do it)

export const UserProvider: FunctionComponent = ({ children }) => {
    const isDev = global._REACT_CONTEXT_DEVTOOL

   // ... other code

   return (
        <UserContext.Provider
            value={{
                authenticated,
                setAuthenticated,
                cart,
                addToCart
            }}
        >
            {isDev && (
                <ContextDevTool
                    context={UserContext}
                    id="userCtx"
                    displayName="Current User"
                />
            )}

            {children}
        </UserContext.Provider>
    )
}