I am using Strapi Version: 4.20.5.
I’m looking to create a reusable component in Strapi that can store static data and be used across various pages (both single and collection types) without the need to re-enter the data each time. Ideally, this component would allow me to update the data in one place, and the changes would reflect across all instances where the component is used. Is there a way to achieve this in Strapi? Any guidance or examples would be greatly appreciated!
This topic has been created from a Discord post (1248201609846980629) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord
<@632956853122236457> Thank you! It helps a lot.
Hey there! <@614946663882293269> have you been able to build reusable component?
I need to do the same thing as you, but seems like Strapi relation is not really the usecase for it, no? Seems like relation is used more for relatioships, such as you have a blog post, it needs a author🤔
But let’s say you have a component howItWorks that need to be used with the same content on multiple page, it’s not really… A relation. Isn’t it?
That’s is exactly what relation is
What’s the use case for a reusable component with static data?
You could certainly use a relation for this. Unfortunately you can’t create relations with single types but you could create a collection type and just have a single entry in it that you select as the relation in every other collection you want to reference it.
But there’s probably a better approach depending on your use case. Like if you just want some reference data to be shown when a user is creating/editing an entry in some collections then you could hardcode that reference data and use the admin panel api to inject a component with that data. Make a code change any time that data changes.
But it all depends what you’re trying to accomplish.
Thanks for the reply!
The use case is foundational I’ll say, as it is usually required for all marketing site in Tech:
Let’s say I have a marketing site for my SaaS, and want to create a component listing all the industries I serve.
This “industries.tsx” component will be used across various page, such as landing page, homepage, maybe some blog post page at the very bottom (why not).
As you can guess, the content of that Industries component will always be the same. Hence, I dont want my Content Specialist to have to copy paste 10X times the content of the Industries component.
I want to handle the content of that reusable component only in one single source of truth in Strapi admin.
Oh I’d just use a single type (Introduction to the Content Manager | Strapi Documentation) in Strapi then. And in your frontend code you use that one single type from Strapi to display that component across various pages (fetch it once, cache it). It doesn’t have to be related to the Strapi collections shown across various pages.
If you did want to let content editors control whether or not that reusable component is shown for some reason you could use a boolean attribute on those collections with a common name like “showIndustries” and just include some custom logic in your frontend code to look for an attribute with that name. Something like that anyways.
Thanks Kellen! I’ll check it out in a few hours
Hmm… Seems like Relation is only usable with Collection Type
Indeed the whole point is for this content to be editable by the content team in one single spot in Content Manager section
So I’ve created the single type Industries. Now, I’d like to be able to add this single type “Industries” as a component in position 3rd component of my page entry XYZ.
Seems like such a thing wont be possible?
Cause the solution you’re offering for my need (if I understand correctly your second paragraph), is to hard code a fixed boolean field at the content type collection level such showIndustries. But I wont be able to decide/drag and drop that industries component such as putting it as a third component, a fourth component, etc - Just as a basic block component added in this entry, right?