I wanted to use bidirectional components the same way the simple html component is used. We have the following:
import streamlit.components.v1 as components
components.html("html here")
With bidirectional components, you have to set up multiple directories, index.html, maybe a frontend framework like React, etc.
streamlined_custom_component now takes care of that for you, allowing for bidirectional html/css/javascript components in a similar way to components.html above.
Here is the simple usage:
from streamlined_custom_component import create_component
input_id = 'test'
html_input = f"""
<input id="{input_id}" value="test" />
<button id="submit-button">Submit</button>
"""
java_script_input = """
console.log('Additional JavaScript');
"""
css_input = """
body {
background-color: lightblue;
}
"""
modifications = {
"input_id": input_id,
"html": html_input,
"javascript": java_script_input,
"css": css_input
}
my_component = create_component(component_name="custom_component1", modifications=modifications)
value = my_component()
st.write(f"Component returned: {value}")
# Display the value
print(value)
Which gives you:
You can install it via:
pip install streamlined_custom_component
