Context Provider within React Component in astro

[vocal cairn]

Hello all, i'm new to using astro so i'm attempting to understand if something is possible. I have a SDK that i am using but in order to use it I need to wrap my react component in a context provider. I haven't necessarily found a clear answer other than the statement below from the docs.

"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."

I've attempted to do this in multiple ways within astro and see if this is feasible but so far i'm having no luck. Can someone help get me out my misery and outright tell me if this is possible.

Thanks.

[stray birch]

I think context probably only works inside a client:only React component that is only rendered in the browser. Is there a way to pass the SDK as a prop instead of using a context wrapper?

[vocal cairn]

To use any of the functionality provided by the SDK you must wrap your application or atleast your react components in the provider. I don't believe your statement 'I think context probably only works inside a client:only'
Let me explain with what I have attempted. I created a react component lets call it 'provider.jsx' which will be the container for a modal react component (modal.jsx) I have created.

It look something like:
Class Provider......
return(
<SDKProvider ...someprops>
<Modal/>
</SDKProvider>
)

This is then imported in my astro file markdown as

<Provider client:load/>

I've even attempted it with hydration on the <Modal/> component

I've attached a button within my modal with a simple onclick function that logs some random string for now.

When wrapped in the provider this does not log. When i remove the provider the button does log

[stray birch]

Does it work if provider and modal are both inside a .jsx file?

// src/components/app.jsx
export const App = () => {
  return (
    <SDKProvider ...someprops>
      <Modal/>
    </SDKProvider>
  );
}

---
// src/pages/index.astro
import { App } from '../components/app';
---
<App />