yeah there isn’t really a general purpose react way to do that.
if order didn’t matter then you could just have a Header component that registers itself in a context but there’s no way to know where each component is relative to its siblings.
the other way is to break out of react and just walk the dom. pass a ref to your component and use that as the root to walk. only works assuming normal react dom renderer and no portals.
you can combine those two options too, use context for registration so you can attach extra info, then dom for position.
there are some libs that let you walk a component tree, but they’re all focused on ssr and idk how they work in a browser. wouldn’t go this route for anything prod.
last option is just store your content as data. have md/mdx/json/whatever files that are the content for your page, then as you parse them build up the tree. probably the most robust if it fits your use case. if you use MDX it seems like they already have some solutions
yeah there isn’t really a general purpose react way to do that.
if order didn’t matter then you could just have a Header component that registers itself in a context but there’s no way to know where each component is relative to its siblings.
the other way is to break out of react and just walk the dom. pass a ref to your component and use that as the root to walk. only works assuming normal react dom renderer and no portals.
you can combine those two options too, use context for registration so you can attach extra info, then dom for position.
there are some libs that let you walk a component tree, but they’re all focused on ssr and idk how they work in a browser. wouldn’t go this route for anything prod.
last option is just store your content as data. have md/mdx/json/whatever files that are the content for your page, then as you parse them build up the tree. probably the most robust if it fits your use case. if you use MDX it seems like they already have some solutions