How to pass props to Layout when its removed

[hellofantastic]

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.

[orinokai]

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.

[hellofantastic]

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

[TylerBarnes]

@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!

[hellofantastic]

Okay will be in this, this coming week.

[hellofantastic]

Should have commented on this earlier, got it working via state prop, thanks!