Gatsby: Layout components best practices

[iakovosvo]

Can someone recommend a good approach for customizing layout components with Styled Components? I am trying to decide whether I should have one big layout component on which I will conditionally render children using the location pathname to each own layout tags or have separate layout components for each page.

For example for my index, contact and about section I can use the main Layout component I already have. For the page that I am listing items, I need a grid layout but for the detailed item page, I need a different layout.

[pieh]

It might depend on how much your layout changes - if those are subtle changes then single layout is ok. But I would advise not to use location, but instead pass prop from page component:

<Layout variant="grid">
  <RestOfPageComponents/>
</Layout>

That way your pages control which layout exactly is used and you don't need to rely on location to pick correct one.

If you changes are vast then creating separate layout components make sense - it would still be similar to what I showed above, but instead page component would use different layout instead of passing prop.

[aesthytik]

Yeah like @pieh said. Depending upon your extent of changes between your pages you can have separate layouts. If changes are minor simply passing props from each page is a great choice :)

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!