Radix themes with Astro

[thebrownfox]

With some components I get useThemeContext must be used within a Theme.

Here's reproducible example: https://stackblitz.com/edit/github-uiu4in?file=src%2Fpages%2Findex.astro

[thebrownfox]

For future reference, it's how astro works. You cannot use react context within multiple astro islands.

When building an Astro website with islands architecture / partial hydration, you may have run into this problem: I want to share state between my components.

UI frameworks like React or Vue may encourage “context” providers for other components to consume. But when partially hydrating components within Astro or Markdown, you can’t use these context wrappers.

Astro recommends a different solution for shared client-side storage: Nano Stores.

https://docs.astro.build/en/recipes/sharing-state-islands/

[vladmoroz]

@thebrownfox are you saying features that rely on Theme context won't work in Astro? Not sure I'm seeing a workaround there

[thebrownfox]

@thebrownfox are you saying features that rely on Theme context won't work in Astro? Not sure I'm seeing a workaround there

Yes. I can see there could be some workarounds.

1. framework level - there'd be some abstraction that would allow sharing state on higher level
2. nested theme elements using one state for configuration (wrapping every component that needs the context, which is not pretty)