Create Streamlit Component for a React UI Library

Custom Components
1

Summary

How to create a Streamlit component for multiple react components with one frontend codebase.

Description

I’m trying to create a Streamlit custom component for the MUI React library and want to understand how i can handle advanced functions such as handling click events when button is clicked.

Here is how i approached creating multiple React components for the same Streamlit component.

Python Land

import streamlit.components.v1 as components
_component_func = components.declare_component("Mui", url="http://localhost:3001")

# define each component in its own function
def mui_button(label:str, variant="outlined", color="primary"):
    _component_func(
        component="button",
        label=label,
        variant=variant,
        color=color
)
def mui_iconbutton(icon: str):
    _component_func(
        component='iconbutton',
        icon=icon
)

Frontend Land

class Mui extends StreamlitComponentBase {
    public render = (): ReactNode => {
        const component = this.props.args["component"]
        const label = this.props.args["label"]
        const variant = this.props.args["variant"]
        const color = this.props.args["color"]
        const size = this.props.args["size"]
        if (component === "button") {
            return <MuiButton
                label={label}
                variant={variant}
                color={color}
                size={size} />
        }
        if (component === "iconbutton"){ return <IconButton />}
    }
}

export default withStreamlitConnection(Mui)

<MuiButton /> is a normal React component implemented as a function. i got the props to work as expected when passed from python but the click event handler is not working when implemented at the component level rather than root level (Mui).

Any suggestions are much appreciated.

Thank you!