Component render based on previous/next content item.

[solid current]

Hello there 👋 I'm currently trying to have a component, which render function depends on some props of previous/next component. For example if previous component is X, background colour is red, if next component is Y, add some extra padding, etc. What would be the best approach to go about it?

I was able to kinda got it working by getting appState.data.content from usePuck, but this doesn't feel right and I would need to wrap the Render component with Puck to get the Provider.

Maybe there is something that can be run after each change, to generate new props or something? Any help appreciated.

[dark mauve]

Hey @solid current! You can use any of the any approach you'd normally use in a React application (with a few considerations).

One option is to use querySelectors along with HTML data attributes. That way, you can select a node and check whether the next or previous elements are of a specific type, and handle that accordingly. The only consideration here would be to check if you're editing or not and based on that use the page's document or the iframe's contentDocument

You could also use context or usePuck, as you're currently doing. However, as you pointed out, the issue with the latter is that the Puck context isn’t available inside Render.

If your use case is limited to non-interactive styling, you might also consider using plain CSS rules and selectors. But since it sounds like interactivity is involved, that might not be sufficient.

[solid current]

Hey @dark mauve , thanks for quick reply.

querySelectors sounds like a great idea for checking the type, so great shout, thank you!

And yes, seems like we will be moving even more towards interactivity and there will be some visual aspects based on props from previous/next item, so I don't think I will be able to get away with plain CSS rules and selectors. For plain Render I can probably run all the logic before passing the data to it, but no idea how to go about it in the Editor. I don't suppose there is some king of middleware or something that I could hook up to?

[dark mauve]

You could use the querySelectors in the components themselves, would that work for your use case?