I'm building a Gatsby site with Prismic that, as we're getting towards the end of the dev process, is starting to have a fairly large number of components.
I'm wondering, however, what the best practices are for components that are used in multiple places across the site although they might have different props or be accessing GraphQL queries differently? For example, I have a hero component that is used on multiple pages and templates.
In one place it might be used in a Prismic slice, and in another, it might just be a part of a page, without slices.
With that in mind, if I have a heading which would be templated in the slice's iteration using {slice.primary.heading.text}, and a heading outside of Prismic's slices templated using {document.heading.text} I'm, at this point, stuck creating multiple versions of the hero component, one for the slice and another to be used on pages.
While I've had a good bit of experience with React and Gatsby over the last year, I'm still new to best practices.
Is this the correct way to do it, using multiple components, or is there a better way to accomplish this?
Asked
Active
Viewed 108 times
0
Or Assayag
- 5,662
- 13
- 57
- 93
Jesse Winton
- 568
- 10
- 33
-
It seems you have one component with a `heading` prop and you're passing different values at each usage site. That sounds totally fine. Why do you have "multiple versions of the component"? – Bergi Dec 12 '20 at 09:06
-
If they really are not just configurable with props then either they should probablyy be different components, or maybe they should just have different contents. In which case having Hero support a `children` prop that would then be different in each usage. – dpwr Dec 12 '20 at 09:46
-
thank you both, that’s incredibly helpful info. just needed someone to bounce this stuff off of. – Jesse Winton Dec 14 '20 at 01:57