I want to pass a context which I want to be available to the body of my page. How do I acheive that? Do I directly wrap the body tag instead of the children in layout.tsx? How then would I use it on the body
#Context API in Next.js
pearl dragon
sick flintBOT
earnest kettle
I want to pass a context which I want to be available to the body of my page. Ho...
Yes, but wrap the {children} inside the <body>.
Then you can just use the hook inside the children of the body
pearl dragon
Yes, but wrap the {children} inside the <body>.
See here https://nextjs.org/doc...
Yea I know about the method used in this link. But what I want to do is use the hook in the body tag itself not just the children. In fact, I might not need to use it in the children
earnest kettle
Yea I know about the method used in this link. But what I want to do is use the ...
Hmm, why?
What are you trying to do
pearl dragon
What are you trying to do
Nothing much. Just store a state to keep track of various themes so I can then apply different styles
eager prairie
Why to use context if you will not use it elsewhere ?🤔
earnest kettle
Nothing much. Just store a state to keep track of various themes so I can then a...
If you only want to pass it as a props, you can use document.body instead
Speaking of themes, check out next-themes
It handles fouc for you
pearl dragon
Speaking of themes, check out next-themes
Document.body? Will I be able to pass it to the body text
pearl dragon
Why to use context if you will not use it elsewhere ?🤔
Of course I'll need it in other components. I said might cus if I pass it to the body, I'll be able to reference it in other parts
earnest kettle
Document.body? Will I be able to pass it to the body text
you can write this anywhere where you need to change the body
like if you need to do it on button click,
then just onClick={()=>document.body.style.background = "Red"}
pearl dragon
like if you need to do it on button click,
then just `onClick={()=>document.body...
Ok but this wouldn't work because I have to keep track of the themes so the other parts will change along with it. Currently I'm using numbers to keep track of the themes. The numbers change on toggle. I gave up on surrounding the body tho but now I'm having an issue. It says useTheme is not a function. BTW, useTheme is the custom function I created that just returns the useContext(Them context)
I have no idea what I'm doing wrong. Sorry it isn't clear tho
earnest kettle
Ok but this wouldn't work because I have to keep track of the themes so the othe...
Just use next-themes
No offense but its a bit hard to set themes correctly without fouc
UseTheme is not a function because useTheme is declared in the client comps
pearl dragon
UseTheme is not a function because useTheme is declared in the client comps
How then do I fix it. I tried look at next-themes nom docs. It was all about setting up in the page router. What is fouc btw. I would really appreciate it If I could acheive this myself tho
earnest kettle
fouc is flash of unstyled content
okay lets do it yourself and see if you can do it
basically, your export default function Home is by default a server component
And you can't use client-side hooks in server component
so you have to create a client component by writing "use client" and exporting it
the client component can have useContext() to consume your theme provider
pearl dragon
the client component can have useContext() to consume your theme provider
Yes I tried using use client in page.tsx. Didn't work out well I kinda found out a way tho. I restricted use client to on ThemeProvider. I believe it was the one calling use state
Apparently that wasn't enough
I had to use use client in my layout.tsx too and page.tsx too
Doesn't feel right
pearl dragon
Looks like that solved my theme issue tho but maybe layout page client feels buggy
earnest kettle
Doesn't feel right
themes are 100% controlled by the client
it feels right to me 😭
if you dont want to use client
then use CSS to control the display of your themes
that way it can be server rendered
of course there are still cases where you need to show component, outside of the CSS ability