Closed hellofantastic closed 4 years ago
The layout component gets passed the same props as the page it wraps (see the example here), including location, data, etc. As a workaround it might be useful to conditionally render different items depending on the page.
Okay so perhaps I could try on a slide transition callback send a prop up to the page and check for it in the layout and pass it into nav to adjust its colors. Or introduce a global state context/redux and set it and connect nav to that and skip passing.
Don't think I properly conveyed in the first explanation but I was hoping to adjust nav colours per slide because the nav sits over top the sliders and some slides will have dark backgrounds and some will have light backgrounds
@hellofantastic I think you might be looking for the state
prop!
See here https://transitionlink.tylerbarnes.ca/docs/transitionlink/#props-and-options (scroll down to "State option"
exit={{
state: {
thisIs: 'passed to the exiting page'
}
}}
entry={{
state: {
thisIs: 'passed to the entering page'
}
}}
In the example site https://gatsby-plugin-transition-link.netlify.app/ if you click the link in the middle that says "Go to page 2 that way ☝️and give us a dark theme when we get there." you can see this in action.
Let me know wether that's what you're looking for or not!
Okay will be in this, this coming week.
Should have commented on this earlier, got it working via state prop, thanks!
Awesome work BTW. After I figured out the remove layout ( config resolve etc) for a fixed header nav and studied gsap greensock, pages transitions are slick.
BUT I'd like to pass props to the layout depending on different pages and sometimes on a page that has a slider per slide . some pages or some slides may have dark or light header image so layout nav needs to adjust color of text and logo.