search

Daydreamer-riri / vite-react-ssg

Static-site generation for React on Vite.
https://vite-react-ssg.netlify.app/
MIT License
97 stars 4 forks source link

[Support] How to pass a variable to <Outlet />? #18

Closed joshkotrous closed 3 months ago

joshkotrous commented 3 months ago

I want to find out how to manage variables that are stored in index.tsx or Layout.tsx. In my specific case, I have dark mode implemented on my website. This is controlled by variables I am storing in Layout.tsx. I also have a blog built out, accessible at pages/posts/[postname] that I want to also receive and respect the dark mode setting. Effectively I need to be able to pass props to the <Outlet/> component that is called in Layout.tsx. Can you help me figure out how to achieve this?

Daydreamer-riri commented 3 months ago

The Outlet is provided by react-router and should not accept parameters; it is only used to render the matching route view. Based on your scenario, you should use a Context to wrap your Layout (or Outlet), and then use useContext to retrieve the state where it is needed.

See: https://react.dev/reference/react/createContext

Daydreamer-riri commented 3 months ago

‌‌‌‌If you have any questions regarding usage, feel free to ask me. I will respond as soon as possible.