Not able to call multiple Custom React Components

🎈 Using Streamlit
1

Summary

I need to call multiple ReactJS custom components in a streamlit app.
I am following this link by Fanilo ANDRIANASOLO for calling components. This link talks about calling a single component but , if I need to call more components, I need guidance.

This link talks about how we could do so, but I am not able to follow the same . I tried the second approach but don’t know how to call args in index.tsx as stated in the link above .
@andfanilo and other stalwarts, please help.

Steps to reproduce

my project setup is exactly like the one provided in this link:

Code snippet:
app.py :

import streamlit as st
from streamlit_custom_slider import st_custom_slider 
from streamlit_ws_localstorage import injectWebsocketCode, getOrCreateUID

v_custom = st_custom_slider('Hello world', 0, 100, 50, key="slider1")
st.write(v_custom)

Code snippet:
init .py:

import os
import streamlit.components.v1 as components
from typing import Tuple
_RELEASE = True
_component_func = components.declare_component( 
        "custom_slider", 
        url="http://localhost:3001",
    )
def st_custom_slider(label: str, min_value: int, max_value: int, value: int = 0, key=None) -> int:
    component_value = _component_func(label=label, minValue=min_value, maxValue=max_value, initialValue=[
                                       value], key=key, default=[value])
    return component_value[0]


v_custom = st_custom_slider('Hello world', 0, 100, 50, key="slider1")
st.write(v_custom)

Code snippet:
init .py:

import os
import streamlit.components.v1 as components
from typing import Tuple
_RELEASE = True
_component_func = components.declare_component( 
        "custom_slider", 
        url="http://localhost:3001",
    )
def st_custom_slider(label: str, min_value: int, max_value: int, value: int = 0, key=None) -> int:
    component_value = _component_func(label=label, minValue=min_value, maxValue=max_value, initialValue=[
                                       value], key=key, default=[value])
    return component_value[0]


v_custom = st_custom_slider('Hello world', 0, 100, 50, key="slider1")
st.write(v_custom)

Now, in streamlit_custom_slider/frontend/src/
there are “CustomSlider.tsx” & “CustomSlider2.tsx” & “index.tsx”

Code snippet:
index.tsx:
Here, How Could I call multiple react components

iimport React from "react"
import ReactDOM from "react-dom"
import CustomSlider from "./CustomSlider"

// Lots of import to define a Styletron engine and load the light theme of baseui
import { Client as Styletron } from "styletron-engine-atomic"
import { Provider as StyletronProvider } from "styletron-react"
import { ThemeProvider, LightTheme } from "baseui"

const engine = new Styletron()

// Wrap your CustomSlider with the baseui them
ReactDOM.render(
  <React.StrictMode>
    <StyletronProvider value={engine}>
      <ThemeProvider theme={LightTheme}>
        <CustomSlider />
      </ThemeProvider>
    </StyletronProvider>
  </React.StrictMode>,
  document.getElementById("root")
)

If applicable, please provide the steps we should take to reproduce the error or specified behavior.

Expected behavior:

Explain what you expect to happen when you run the code above.

Actual behavior:

Explain the undesired behavior or error you see when you run the code above.
If you’re seeing an error message, share the full contents of the error message here.

Debug info

  • Streamlit version: (get it with $ streamlit version)
  • Python version: (get it with $ python --version)
  • Using Conda? PipEnv? PyEnv? Pex?
  • OS version:
  • Browser version:

Requirements file

Using Conda? PipEnv? PyEnv? Pex? Share the contents of your requirements file here.
Not sure what a requirements file is? Check out this doc and add a requirements file to your app.

Links

  • Link to your GitHub repo:
  • Link to your deployed app:

Additional information

If needed, add any other context about the problem here.

2

P.S. I cant create a public repository of the components. This will be used internally

3

Please help.