Custom component without using an iframe?

Custom Components
1

Hello I’m very new to streamlit. I wanted to know if there is the possibility to load a custom component without using an iframe.
This is the component i want to import.
I’ve pip installed the component but when I import it I see that in the DOM it is placed inside an iframe, is it possible to to import it wihout an iframe maybe by loading it manually?
Can someone guide on the steps I need to take in order to achieve this?
I think that I first need to clone the repo and import the function that create the component but is it the best practice?

Best regards, EB

2

Streamlit currently has its own version of this component which you can use without an iframe. Its called st.feedback

3

st.feedback doesn’t have any out of the box support to leave a comment, if streamlit_feedback is incorporate in the actual codebase would be great

4

Ah okay. Well streamlit’s custom components are built using iframe. If you want a non-iframe solution, perhaps build an out of the box solution using st.html or st.markdown. The issue though is passing the data to streamlit which will require some interaction with javascript (i.e. the use of st.components.v1).

What is the problem with the iframe? Is is the space it takes up? You can target it via

st.html( '''
<style>
     div:has(iframe[title='title_of_component']){
           height:0px;
          /* OR */
          display:none;
     }
</style>
''')

or 

st.markdown( '''
<style>
     div:has(iframe[title='title_of_component']){
           height:0px;
          /* OR */
          display:none;
     }
</style>
''', unsafe_allow_html=True)

Using display may prevent the component from being displayed in your app.

5

I am having the same problem. I would like to write a very trivial component that displays some custom HTML and when user clicks on it, it passes what got clicked on into Streamlit. The only way I found out how to do that was creating essentially an entire separate website that gets loaded using iframe, which ideally gets bundled using webpack and minified and comes with its own CSS and html… which is neat, but I don’t really care for all the extra complexity.

I can write out html using st.html, but while that is not iframed, it does not support javascript.

I would essentially need three things:

  1. way to inject JavaScript with my HTML
  2. way to pass Streamlit object into my javascript, so I can call methods on it
  3. the API I would use would simply return whatever state my javascript passes out to Streamlit. I am imagining api like this:

st.custom_component(‘html chunk’, ‘javascript chunk’) → returns whatever the javascript set the state to…

Ideally a simple component with little HTML and little javascript is few lines of python code, as opposed to python + node + bundling + deploying + dependency + etc etc etc. I do not mean to use this to make some high quality components, more like “scratch an itch” putting together some simple quick hacks.

I think being able to do such a thing would go well with the otherwise extreme simplicity of using Streamlit that I greatly enjoy!

6

Take a look at this thread:

1 Like
7

I think that dealing with data that changes is really an hassle. Is it secure to call some python function from the components? I’m concerned about potential exploits from the client side