What's the cleanest way to conditionally render classes on the <body> state changed in lower levels
Unanswered
Gray-tailed Tattler posted this in #help-forum
Gray-tailed TattlerOP
I can imagine a few approaches such as
1) Directly modifying the document in useEffect() within my lower level component.
2) Wrapping my body in context provider
3) Managing the state with a store of some kind.
Just curious what common common approaches to this are in Next+App Router.
My specific case is a mobile nav menu that needs to lock scrolling on the body when open, although I've been generally curious about other approaches to this question.
1) Directly modifying the document in useEffect() within my lower level component.
2) Wrapping my body in context provider
3) Managing the state with a store of some kind.
Just curious what common common approaches to this are in Next+App Router.
My specific case is a mobile nav menu that needs to lock scrolling on the body when open, although I've been generally curious about other approaches to this question.
2 Replies
using useContext in this case would also require the use of useState or useRef, which would have to make the whole body, and thus all its children, a client component, which isnt ideal.
you can use like basic js, by getting the body tag with a document.querySelector() and toggling a css style
you can use like basic js, by getting the body tag with a document.querySelector() and toggling a css style
Gray-tailed TattlerOP
could you not pass server components to your parent client component that holds the body state? https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props