Question about giving the layout component information about the page component for per page transitions.

[TylerBarnes]

Summary

I spent some time a couple weeks ago figuring out how to get a different page transition for each page (as specified by the page component) and I came up with what seems to me to be a reliable enough solution. It feels hacky though and I'm wondering if there's a better way to do this in gatsby.

I'm using gatsby-plugin-layout to create my own layout component that doesn't unmount. I'm then adding default props to my page components with a transition component as a prop. The layout component then checks the props of the page component since it has access to it and it wraps the page component in the specified transition component.

example site
example repo

In my page component:

import TransitionElement from './transitions';

const PageName = () => (
    <div><h1>This is my page</h1></div>
);

PageName.defaultProps = {
  transitionComponent: TransitionElement
};

export default PageName;

In my layout component:

export const WrapPageComponent = ({ element, props }) => {
  const { key } = props.location;
  const { transitionComponent: TransitionComponent } = element.props;

  return (
      <PoseGroup>
        <TransitionComponent key={key} {...props}>
          {element}
        </TransitionComponent>
      </PoseGroup>
  );
};

Relevant information

This seems to work well because the layout component can just check the props of the page component but I have a feeling this is really hacky. Is there a better way for the layout component to know about the page component?
I thought maybe I could use the context api for this but I couldn't get it to actually work.

[TylerBarnes]

This could be the foundation for a gatsby transition component plugin #5213 if for example the page component could just have a named export that the layout component could pick up.

export default PageComponent;
export { TransitionComponent };

[kakadiadarpan]

@TylerBarnes let's continue this conversation in #5213

Closed in favor of #5213