Hi, Just wondering if communicating with a React Component from Streamlit AFTER the component has been created is possible? component_host = components.declare_component(name='ComponentHost', url='http://localhost:3001') props = {'data': 'initialValue'} event = component_host(key='id1', **props) n…

Hey @asehmi , Let me make sure I’m understanding the question: event = component_host(key='id1', **props) newValue = processEvent(event) # You want to send newValue back to component_host? Assuming this is the case, the answer is that it can’t be done particularly easily. You can effectively commu…

Thanks for a quick response. This is all about trying to overcome the allow-same-origin problem with components that need to make an API web request. What I ended up doing was getting the component to delegate the API web request back to Streamlit, and now I want to send those API results back to th…

P.S. Happy to have short web conf with you to demo my code exchange authentication solution.

Ah, I see! Yeah, that’s a pain. Rather than solving it this way - which will continue to be painful, as it doesn’t mesh well with the Streamlit execution model - I’d suggest trying to move the auth step back up to the client (possibly with a proxy in between, if the Auth0 endpoint requires a non-nu…

In my case, Streamlit is running on port 4008, the React component on port 3001, and the Flask API on port 8888. I have a proxy setting in React’s package.json redirecting all unknown routes to 8888. Is your component built and running under Streamlit’s port? What if you set it up as I have?

My setup is identical to yours (Streamlit, component, Flask API all on different ports) - but I’m not using a node proxy. I can put together a sample, if it’s useful.

If it’s not too much trouble, that would be great. Thank you.

@tim I hope I can save you some time, because I have managed to make it work following your guidance. In fact, I got both the session state + rerun approach (with my delegated web request to Streamlit) and direct api call schemes working. The latter is by far preferable!! I had unfortunately got { m…

Oh, great to hear! Good catch on the no-cors header - CORS is a massive pain, and I get it wrong literally every time I have to use it.

Communicating with a React Component from Streamlit AFTER the component has been created?

Custom Components

asehmi November 19, 2020, 10:45pm 11

Hi @tim,
I’ve put my app up on GitHub for the community. Here’s a brief post about it with a demo gif.

Topic		Replies	Views
Custom component with full bidirectional communication Custom Components session-state	0	1079	February 25, 2023
Issues calling an API endpoint from React custom component? Custom Components	2	2263	November 13, 2020
Send Event to React Component After Creating Custom Components	3	2360	February 3, 2022
Getting data back from streamlit component backend to frontend Using Streamlit components , discussion	0	583	April 15, 2024
Accessing Local Storage/ Session Storage in custom components Custom Components	12	4764	January 26, 2021

Communicating with a React Component from Streamlit AFTER the component has been created?

Related topics