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.